Не выводит страницы после добавления навигации (AppRouter), как исправить?

Question

[FeDroid74]

В файлах, когда еще навигации не было, AppRouter я еще не добавлял, всё работало нормально, но после того как я сделал AppRouter с consts.js на странице не отображалось ничего, также консоль выдавала данные ошибки. React-router-dom стоит шестой версии, у меня ранее возникали ошибки, то что в поздней версии удалили Switch и сделали Routes, удалили Redirect и сделали Navigate, поэтому я даже уже не знаю на что ссылаться.

Код App.js:

import './App.css';
import React from 'react'
import {BrowserRouter} from 'react-router-dom'
import AppRouter from './components/AppRouter.js'

function App() {
  return (
      <BrowserRouter>
          <AppRouter />
      </BrowserRouter>
  );
}

export default App;

Код AppRouter.js:

import {Routes, Route, Navigate} from 'react-router-dom'
import Admin from "../pages/Admin"
import Main from "../pages/Main"
import Shop from "../pages/Shop"
import Product from "../pages/Product"
import Info from "../pages/Info"
import {ADMIN_ROUTE, MAIN_ROUTE, SHOP_ROUTE, PRODUCT_ROUTE, INFO_ROUTE} from "../utils/consts";

const publicRoutes = [
    {
        path: MAIN_ROUTE,
        Element: Main
    },
    {
        path: SHOP_ROUTE,
        Element: Shop
    },
    {
        path: PRODUCT_ROUTE + './:id',
        Element: Product
    },
    {
        path: INFO_ROUTE,
        Element: Info
    }
]

const adminRoutes = [
    {
        path: ADMIN_ROUTE,
        Element: Admin
    }
]

const AppRouter = () => {
    const isAdmin = true
    return (
        <Routes>
            {publicRoutes.map(({path, Component}) =>
                <Route key={path} path={path} element={<Component />} />
            )}
            {isAdmin && adminRoutes.map(({path, Component}) =>
                <Route key={path} path={path} element={<Component />} />
            )}
            <Navigate to={MAIN_ROUTE}/>
        </Routes>
    )
}

export default AppRouter

Answer 1

[Александр]

В массивах Вы использовали Element, а деструктурируете Component.

Comments

[FeDroid74]

Спасибо большое, очень помогли, но есть ещё одна проблема, и решения на неё не могу найти. Она заключается в том, что в консоли еще отмечается ошибка с Navigate, после удаления всё работает. Не подскажите, что нужно использовать вместо Navigate, если стоит react-router-dom v6?

[GlazOtca]

FeDroid74, какой еще Navigate ? Есть useNavigate - вот почитайте о переходе с 5-й на 6-ю версию https://devsday.ru/blog/details/78290

[Александр]

FeDroid74, https://reactrouter.com/docs/en/v6/api#navigate. GlazOtca тоже можете почитать.