react_devtools_backend.js:4012 No routes matched location "/about" and PostId and Post
В файле 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>
Ответы (1 шт):
Автор решения: SwaD
→ Ссылка
В массиве, ключу 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>