参数匹配返回空 React-router

Question

我面临一个看似简单的问题，但它变得越来越复杂，即使有一些写得很好的现有主题。

我有一条全球路线

export const createPricingPath = `${catalogRoutes.priceLists.path}/creation/:pricingId?/:step(products|parameters|customers-groups)`;
export const toCreatePricingPath = pathToRegexp.compile(createPricingPath);

如您所见，我有一个步骤参数和一个可选的参数，称为pricingId。

我有一条通往顶级父组件的父路由

    <ProtectedRoute
      exact
      AUTHORIZED_ROLES={[USER_ROLES.PRICING]}
      path={createPricingPath}
      render={props => <PricingCreationPanelContainer {...props} />}
    />

父顶级根组件如下：

            <SlidePaneProvider route={catalogRoutes.priceLists.path}>
                {({ handleCancel }) => (
                    <Fragment>
                        <PricingCreationPanelHeader handleCancel={handleCancel} {...this.props} />
                        <SlidePaneBody>
                            <PricingContent handleCancel={handleCancel} {...this.props} />
                        </SlidePaneBody>
                    </Fragment>
                )}
            </SlidePaneProvider>

在这个组件中，我们有一些“commun”元素，例如 PricingCreationHeader 和 SlidesComponents（body 等），我有一个 PricingContent，它是包含我的子路由和子组件的子组件。

看起来像这样：

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 {...props} />}
            />
            <ProtectedRoute
                exact
                AUTHORIZED_ROLES={[USER_ROLES.PRICING]}
                path={toCreatePricingPath({ step: 'customers-groups', pricingId: params.pricingId })}
                render={props => <PricingClients handleCancel={handleCancel} {...props} />}
            />
        </Switch>
    )
};

问题是，我无法弄清楚为什么我无法在每个子组件（PricingClients 和 PricingProducts）中获取 match.params.pricingId 和 match.params.step 道具。顺便说一下，PricingCreation 不需要pricingId，只需要另外两个。

我确实觉得一切都写得很好。 子组件应该能够获取根父组件以来的所有参数。

也许这是一个架构问题，所以欢迎提出任何建议！ 我浏览了许多现有的主题，但无法找到合适的解决方案。

非常感谢你帮助我！

Answer 1

据我在这里看到，子路由的路径指定不正确。我不认为动态制作路径是一个好主意。指定父路径的缩短版本就足够了，match.pricingId 将在子组件中可用：

const PricingContent = ({ handleCancel }) => {

    return (
        <Switch>
            <ProtectedRoute
                path={ `${base_path }/creation/:pricingId?/parameters`}
                // other props stay the same
            />
            <ProtectedRoute
                path={ `${base_path}/creation/:pricingId?/products`}
               // other props stay the same
            />
            <ProtectedRoute
                path={ `${base_path}/creation/:pricingId?/customer-groups`}
               // other props stay the same
            />
        </Switch>
    )
};

根据上面的代码base_path是catalogRoutes.priceLists.path。

1. 我认为:step 路由参数中没有必要，因为我们为每条路由都有一个单独的组件。 如果我们仍然需要它，可以像这样执行 smt：.../:step(parameters);
2. 可选的:pricingId? 可能会导致安装不正确的组件，例如： base_url/products/parameters 在这种情况下，路由器将“产品”视为:pricingId 路由参数，这不好=） 我经常尝试避免路径中间的可选参数

如果我错过或误解了某些内容，我深表歉意 谢谢