带有动态路由标签的嵌套 React 路由答案

【问题标题】：Nested React routes with dynamic route tags带有动态路由标签的嵌套 React 路由
【发布时间】：2019-08-28 05:45:52
【问题描述】：

我打算路由与反应路由器略有不同。我有一个带有路径、名称和组件的路由对象：

const routes = [
    { path: '/', name: 'Home', Component: HomePage },
    { path: '/about', name: 'About', Component: AboutPage },
    { path: '/projects', name: 'Projects', Component: ProjectsPage },
    { path: '/blog' , name: 'Blog', Component: BlogPage },
    { path: `/blog/:id(\\d+)`, name: 'Post', Component: PostPage }
]

然后我映射为每一个创建一个标签：

{routes.map(({ path, Component }) => (
  <Route key={path} exact path={path}>
     {({ match }) => <Component data={dataObject} imagepath={imagePath} 
     in={match != null} />}
  </Route>
))}

因此，对于`/blog/:id(\\d+)` 的上述实现，它不会工作，而我之前在通常的设置中尝试过这个，没有动态渲染路由并且它可以工作。

任何想法如何满足嵌套路由并仍然保持这样的路由？

【问题讨论】：

标签： reactjs laravel react-router

【解决方案1】：

我最终创建了一个 subRoutes 对象并围绕它进行映射以在第一张地图的下方创建新路线。它应该呈现自己的 Route 标签，这正是我想要的。如果其他人有不同的方法会很高兴看到它:)

const subRoutes = [
    { path: `/blog/:id(\\d+)`, name: 'Post', Component: PostPage },
    { path: `/projects/:id(\\d+)`, name: 'Project', Component: ProjectsPage },
]

{routes.map(({ path, Component }) => (          
   <Route key={path} exact path={path}>
       {({ match }) => <Component data={dataObject} imagepath={imagePath} in={match != null} />}
</Route>
))}

{subRoutes.map(({ path, Component }) => (
  <Route key={path} exact path={path}>
    {({ match }) => <Component data={dataObject} imagepath={imagePath} in={match != null} />}
</Route>
))}

【讨论】：