Вложенные маршруты React с динамическими тегами маршрутов

Question

Я расскажу о маршрутизации, немного отличающейся от реакции маршрутизатора.У меня есть объект маршрутов с путем, именем и компонентом:

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