Добавление динамичных элементов в loop (react router dom 6)

Question

Как подставлять элемент через 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

Answer 1

Нужен компонент Switch

v5: https://v5.reactrouter.com/web/api/Switch

или

v6: https://reactrouter.com/docs/en/v6/getting-started/installation

установить: npm i react-router

Вот еще гайд с ютуба (в 2022 актуально)

github из видео

import React, {useContext} from 'react';
import {Redirect, Route, Switch} from "react-router-dom";

const AppRouter = () => {
    return (
            <Switch>
                {publicRoutes.map(route =>
                    <Route
                        component={route.component}
                        path={route.path}
                        exact={route.exact}
                        key={route.path}
                    />
                )}
                <Redirect to='/login'/>
            </Switch>
    );
};

export default AppRouter;



// Примеры массивов с компонентами:
export const arrayRoutes = [
    {path: '/about', component: About, exact: true},
    {path: '/posts', component: Posts, exact: true},
    {path: '/posts/:id', component: PostIdPage, exact: true},
]

БЛОГ НА HUSL

Добавление динамичных элементов в loop (react router dom 6)

Ответы (1 шт):