Почему react router не видит айдишник в урле?

Question

[Artem641]

Всем привет.
react-router-dom 6
Есть такой набор путей:

<Routes>
      <Route path="/" element={<MainPage />} />

      <Route path="/posts">
        <Route path="" element={<Posts />} />
        <Route path=":postId" element={<PostIdPage />} />
      </Route>

      <Route path="/about" element={<About />} />
      <Route path="*" element={<Error />} />
    </Routes>

Все пути работают. Но когда я переношу пути в константу (в отдельный файл, на случай если путей будет много) роутер не видит postId. Другие пути при этом отрабатывают нормально.
Константа:

export const routes = [
  { path: '/', element: MainPage },
  { path: '/posts', element: Posts },
  { path: '/posts/:postId', element: PostIdPage },
  { path: '/about', element: About },
  { path: '/*', element: Error },
]

{routes.map((r, index) => (
        <Route key={index} path={r.path} element={r.element()} />
      ))}

Саму константу мапим, и получаем те же пути. Но роут для конкретного id не работает. Я сначала думал, что может сам компонент path не так выводит, и проверил это выводом в консоль - путь правильный, но роутер все равно не видит id. Как это можно пофиксить?

Comments

[szQocks]

покажи как ты отлавливаешь id из урла

[Artem641]

szQocks, const { postId } = useParams()

[szQocks]

Artem641, попробуй переписать на нормальный код

у тебя там опечатка в пути "/*" - должно быть "*"
И что за Error

и ты вызываешь компонент как функцию - это похоже и вызывает проблемы, пиши код нормально

export const routes = [
  { path: '/',  element: <MainPage  />},
  { path: '/posts', element: <Posts />},
  { path: '/posts/:postId', element: <PostIdPage />},
  { path: '/about', element: <About  />},
  { path: '*', element: <h1>НЕТ ПУТИ</h1>},
]

<Routes>
{routes.map((r, index) => (
        <Route key={r.path} path={r.path} element={r.element} />
      ))}
</Routes>

[Artem641]

szQocks, заработало! Благодарю за помощь!

Answer 1

[Михаил Р.]

React Router 6 слегка иначе обрабатывается динамические роуты, попробуйте так:

export const routes = [
  { path: '/', element: <MainPage /> },
  { 
    path: '/posts', 
    element: <Posts />,
    children: [
      { path: ':postId', element: <PostIdPage /> }
    ]
  },
  { path: '/about', element: <About /> },
  { path: '/*', element: <Error /> },
]

const renderRoutes = (routes) => {
  return (
    <Routes>
      {routes.map((route, index) => (
        <Route key={index} path={route.path} element={route.element}>
          {route.children && renderRoutes(route.children)}
        </Route>
      ))}
    </Routes>
  );
};

export default function App() {
  return (
    <div>
      {renderRoutes(routes)}
    </div>
  );
}

Comments

[szQocks]

в вопросе он ни слова не сказал о том что PostIdPage не отрабатывает, можно было и подождать с ответом), мне было например интересно что он там скажет

[Artem641]

Благодарю за ответ, но так вообще все падает. Вылезает ошибка:

Uncaught Error: [Routes] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

Насколько я понял, router не хочет воспринимать эту строку в массиве

children: [{ path: ':postId', element: <PostIdPage /> }]

т.к. если ее удалить ошибка пропадает.
Решил оставить как было.