1

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

1 ответ 1

0

Нужен компонент 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},
]

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.