F
F
FeDroid742022-04-22 01:33:37
JavaScript
FeDroid74, 2022-04-22 01:33:37

Does not display pages after adding navigation (AppRouter), how to fix it?

In the files, when there was no navigation yet, I didn’t add AppRouter yet, everything worked fine, but after I made AppRouter with consts.js, nothing was displayed on the page, the console also gave these errors. React-router-dom is on the sixth version, I previously had errors that in the later version they removed Switch and made Routes, removed Redirect and made Navigate, so I don’t even know what to refer to.

App.js code:

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 code:
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


6261db6a14bce069110360.png
6261db718b84d015383225.png

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
Alexander, 2022-04-22
@Seasle

In arrays, you used Element, but destructuring Component.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question