Почему React Router не распознает идентификатор в URL?

Question

Hazel

react

Почему React Router не распознает идентификатор в URL?

Вопрос: При использовании роутера `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` в пути к посту и как это исправить?

14 сентября 2023 г. 16:16

Ответы на вопрос 2

Похожие вопросы

Answer 1

Проблема заключается в том, что в 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`.

Answer 2

React Router 6 поддерживает динамические роуты с некоторыми изменениями. Вот как можно их использовать:

export const routes = [
  { path: '/', element:  },
  { 
    path: '/posts', 
    element: ,
    children: [
      { path: ':postId', element:  }
    ]
  },
  { path: '/about', element:  },
  { path: '/*', element:  },
]

const renderRoutes = (routes) => {
  return (
    
      {routes.map((route, index) => (
        
          {route.children && renderRoutes(route.children)}
        
      ))}
    
  );
};

export default function App() {
  return (
    
      {renderRoutes(routes)}
    
  );
}