React-router路由参数匹配为空，子组件无法获取match.params求助

核心问题原因 #

1. 子路由路径无参数占位符：你在PricingContent中通过toCreatePricingPath传入具体参数生成子路由path，最终得到的是不带占位符的静态路径字符串（如/price-lists/creation/123/products），React Router匹配该路径时不会解析出pricingId和step参数，因此子组件的match.params为空。
2. 父路由多余的exact属性：父级ProtectedRoute配置了exact，如果后续扩展嵌套路由会直接导致子路由无法匹配，属于潜在风险点。

可行解决方案 #

方案1：直接透传父层参数（成本最低，推荐） #

你已经在PricingContent中拿到了父路由的match.params，直接将参数透传给业务子组件即可，无需依赖子路由二次解析：

const PricingContent = ({ handleCancel, match: { params } }) => {
    return (
        <Switch>
            <ProtectedRoute
                exact
                AUTHORIZED_ROLES={[USER_ROLES.PRICING]}
                path={toCreatePricingPath({ step: 'parameters' })}
                render={props => <PricingCreation {...props} />}
            />
            <ProtectedRoute
                exact
                AUTHORIZED_ROLES={[USER_ROLES.PRICING]}
                path={toCreatePricingPath({ step: 'products', pricingId: params.pricingId })}
                // 直接透传参数
                render={props => <PricingProducts pricingId={params.pricingId} step={params.step} {...props} />}
            />
            <ProtectedRoute
                exact
                AUTHORIZED_ROLES={[USER_ROLES.PRICING]}
                path={toCreatePricingPath({ step: 'customers-groups', pricingId: params.pricingId })}
                // 直接透传参数
                render={props => <PricingClients handleCancel={handleCancel} pricingId={params.pricingId} step={params.step} {...props} />}
            />
        </Switch>
    )
};

子组件直接通过props取对应参数即可。

方案2：使用useParams Hook（React Router v5.1+支持） #

如果你的项目使用的是React Router v5.1及以上版本，直接在业务子组件中调用useParamsHook即可拿到全局路由参数，无需关心路由嵌套层级：

// 在PricingProducts/PricingClients组件内
import { useParams } from 'react-router-dom';

const PricingProducts = () => {
  const { pricingId, step } = useParams();
  // 直接使用参数即可
}

方案3：修改子路由配置保留占位符 #

如果希望子路由自行解析参数，将子路由的path改为带占位符的格式，不要用compile生成静态路径：

const PricingContent = ({ handleCancel, match }) => {
    return (
        <Switch>
            <ProtectedRoute
                exact
                AUTHORIZED_ROLES={[USER_ROLES.PRICING]}
                path={`${match.path}/parameters`}
                render={props => <PricingCreation {...props} />}
            />
            <ProtectedRoute
                exact
                AUTHORIZED_ROLES={[USER_ROLES.PRICING]}
                path={`${match.path}/:pricingId/products`}
                render={props => <PricingProducts {...props} />}
            />
            <ProtectedRoute
                exact
                AUTHORIZED_ROLES={[USER_ROLES.PRICING]}
                path={`${match.path}/:pricingId/customers-groups`}
                render={props => <PricingClients handleCancel={handleCancel} {...props} />}
            />
        </Switch>
    )
};

同时需要去掉父路由的exact属性，保证嵌套路由可以正常匹配。

优化建议 #

• 移除父路由exact配置：父路由的路径已经覆盖所有子路由场景，多余的exact会导致嵌套路由匹配失败。
• 抽离公共鉴权逻辑：所有子路由的鉴权规则一致，可以将AUTHORIZED_ROLES配置提到父层路由，子路由无需重复声明。
• 增加参数合法性校验：在父层获取pricingId后做判断，如果是products/customers-groups步骤但pricingId为空，直接跳转至parameters步骤，避免业务异常。

内容的提问来源于stack exchange，提问作者Morzanne