Вопрос: При использовании роутера `react-router-dom` версии 6, когда я переношу пути в константу, роутер перестает видеть `postId`, хотя другие пути работают нормально. Как это можно исправить?
Константа с путями:
```javascript
export const routes = [
{ path: '/', element: MainPage },
{ path: '/posts', element: Posts },
{ path: '/posts/:postId', element: PostIdPage },
{ path: '/about', element: About },
{ path: '/*', element: Error },
]
```
Маппинг константы:
```javascript
{routes.map((r, index) => (
<Route key={index} path={r.path} element={r.element()} />
))}
```
Вопрос заключается в том, почему роутер не видит `postId` в пути к посту и как это исправить?
Проблема заключается в том, что в React Router версии 6 параметры пути должны быть указаны с префиксом двоеточия (`:`). В вашем коде вы указали путь к посту без двоеточия, поэтому `postId` не распознается как параметр.
Исправьте константу с путями следующим образом:
```javascript
export const routes = [
{ path: '/', element: MainPage },
{ path: '/posts', element: Posts },
{ path: '/posts/:postId', element: PostIdPage },
{ path: '/about', element: About },
{ path: '/*', element: Error },
]
```
Обратите внимание, что перед `postId` добавлено двоеточие (`:`), чтобы указать, что это параметр пути. После этого React Router сможет правильно распознать `postId` в URL и передать его в компонент `PostIdPage`.
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>
);
}