Question

我打算使用React Router进行稍微不同的路由。我有一个带有路径，名称和组件的路由对象：

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+)`的上述实现将无法正常工作，而我以前在通常的设置中尝试了此操作，而没有动态呈现路由，因此可以正常工作。

有什么主意如何满足嵌套路线并且仍然保持这样的路线？

Answer 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>
))}

带动态路线标签的嵌套React路线

1 个答案: