Question

我有一个组件，我想为URL params的多个路由呈现。我正在使用react-router v4。现在我使用三种不同的路线。

<Route
    path="/"
    render={path => (
        <Component
          path={path}
        /> 
    )}
/>
<Route
    path="/a/:urlParams1"
    render={path => (
        <Component
          path={path}
        /> 
    )}
/>
<Route
    path="/a/:urlParams1/b/:urlParams2"
    render={path => (
        <Component
          path={path}
        /> 
    )}
/>

有没有更好的方法使用URL参数为多个路由呈现组件？我尝试使用正则表达式的路径，但我无法访问参数。

Answer 1

您目前无法将路径数组作为路径发送，但是此here有一个打开的功能请求。

我可以通过这种方法为您的问题建议一个更整洁的版本：

const componentRoutes = [
  {
    path: "/"
  },
  {
    path: "/a/:urlParams1"
  },
  {
    path: "/a/:urlParams1/b/:urlParams2"
  }
]


<Switch>
  {
    componentRoutes.map(route => (
      <Route key={route.path} exact 
             path={route.path} 
             render={path => (<Component path={path}/>)}/>
    ))
   }
</Switch>

您可以删除Switch组件，仅用于示例。

如何为多个路径渲染组件？

1 个答案: