Как подставлять элемент через map? Комментарий в коде
routes.js
export enum RouteNames {
LOGIN = '/login',
HOME = '/home',
PROPERTIES = '/properties',
ABOUT = '/about',
BLOG = '/blog',
CONTACTS = '/contacts',
}
export const publicRoutes: IRoute[] = [
{
path: RouteNames.LOGIN,
element: Login,
},
{
path: RouteNames.CONTACTS,
element: Contacts,
},
]
export const privateRoutes: IRoute[] = [
{
path: RouteNames.HOME,
element: Home,
},
{
path: RouteNames.PROPERTIES,
element: Properties,
},
{
path: RouteNames.ABOUT,
element: About,
},
{
path: RouteNames.BLOG,
element: Blog,
},
{
path: RouteNames.CONTACTS,
element: Contacts,
},
]
AppRouter
import { Routes, Route } from 'react-router-dom'
import { privateRoutes, publicRoutes, RouteNames } from '../routes/index'
import { useSelector } from 'react-redux'
import { RootState } from '../redux/store'
const AppRouter = () => {
const { auth } = useSelector<RootState>((state) => state.authReducer)
return auth ? (
<Routes>
{privateRoutes.map(({ path, element }) => (
<Route key={path} path={path} element={element} /> // СЮДА приходит строка, <element /> не срабатывает
))}
<Route path='*' element={RouteNames.HOME} />
</Routes>
) : (
<Routes>
{publicRoutes.map(({ path, element }) => (
<Route key={path} path={path} element={element} />
))}
<Route path='*' element={RouteNames.LOGIN} />
</Routes>
)
}
export default AppRouter