时间戳

首页 > 解决方案 > 参数匹配返回空 React-router

javascript - 参数匹配返回空 React-router

问题描述

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

我有一条全球路线

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，只需要另外两个。

我确实有这样的印象，一切都写得很好。子组件应该能够获取所有参数，因为根父组件可以。

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

非常感谢你帮助我！

标签： javascriptreactjsreact-routerreact-router-dom

解决方案

据我在这里看到，子路由的路径指定不正确。我不认为动态制作路径是一个好主意。指定父路径的缩短版本就足够了，并且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不好的路由参数=）我经常尝试避免路径中间的可选参数

如果我错过或误解了什么，我深表歉意谢谢

推荐阅读