react_devtools_backend.js:4012 No routes matched location "/about" and PostId and Post

Рейтинг: -1Ответов: 1Опубликовано: 17.02.2023

В файле rout.js внес пути к файлам

export const routes = [
    {path: '/about', component: About, exact: true },
    {path: '/posts', component: Post, exact: true},
    {path: '/posts/:id', component: PostId, exact: true},
]

Через map создаю route и всю инфу передаю в пропс, но так не работает

<BrowserRouter>
     <div className="navbar">
         <div className="navbar__items">
             <Link to ="/about">about</Link>
             <Link to ="/posts">posts</Link>
         </div>
     </div>

<Routes>
     {routes.map(item => {
         <Route
             element = {item.component}
             path = {item.path}
             exact = {item.exact}
         />
             console.log(item.compon)
      })}

Изначально был написан этот код и он работает
{/*<Route path="/posts" element={<Post/>}/>*/}
{/*<Route exact path="/about" element={<About/>}/>*/}
{/*<Route exact path="/posts/:id" element={<PostId/>}/>*/}
</Routes>
</BrowserRouter>
reactjs react-router
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

В массиве, ключу component должен быть назначен JSX элемент, а не функция.
При возврате JSX из map стоит использовать обычные скобки (), если компонент возвращает 1 значение в виде одной строки.

Если строк кода больше чем одна, то надо использовать фигурные скобки и указывать явно return

export const routes = [
    {path: '/about', component: <About />, exact: true },
    {path: '/posts', component: <Post />, exact: true},
    {path: '/posts/:id', component: <PostId />, exact: true},
]

<Routes>
    {routes.map(item => (
        <Route
          element = {item.component}
          path = {item.path}
          exact = {item.exact}
        />
      ))}
</Routes>

Пример, когда в map более 1 строки

<Routes>
    {routes.map(item => {
        console.log(item.path)
        return <Route
          element = {item.component}
          path = {item.path}
          exact = {item.exact}
        />
      })}
</Routes>