javascript - 如何在 react router dom v4 的嵌套路由中获取参数？

Question

这就是我定义路由器的方式。

   <Switch>
     {routes.map((route, index) => (
        <Route
          {...this.props}
          path={`/${route}`}
          key={index}
          component={props => (
            <Layout
              {...props}
            />
          )}
        />
      ))}
      <Route component={() => <p>Not Found</p>} />
    <Switch>

我从 routes 数组生成一些路由，对于任何不匹配的 route 都会转到未找到的。

在 Layout 组件中，我进一步创建了这样的路由 -

   <div className={"Actionbar"}>          
      <Route
        path={`${props.match.url}/:item`}
        component={() => <EditCategory {...props} />}
      />            
    </div>

当我导航到嵌套路由时，比如说 /edibles/icecream，我应该能够看到 icecream 作为属性 item< 的参数值，对吧？我没有看到它，而且我似乎无法弄清楚如何在此嵌套路由用例中获取 id 参数值。我的 param 对象现在看起来是空的。

Answer 1

找到解决方案。 props 需要和route 一起传递。像这样 -

<div className={"Actionbar"}>          
  <Route
    path={`${props.match.url}/:item`}
    render={(props) => <EditCategory {...props} />}
  />            
</div>

缺少这个不会传递匹配值