В общем, имеем вот такую страницу:
import React from 'react';
const Shop = () => {
return (
<div>
SHOP
</div>
);
};
export default Shop;
хочется увидеть ее вывод, для этого в файл приложения импортировал роутер приложения:
import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import AppRouter from './components/AppRouter';
function App() {
return (
<BrowserRouter>
<AppRouter />
</BrowserRouter>
);
};
export default App;
Собственно сам файл AppRouter:
import React from 'react';
import {Routes, Route, Redirect} from 'react-router-dom'
import {authRoutes, publicRoutes} from "../routes";
const AppRouter = () => {
const isAuth = false //временная авторицазия
return (
<Routes>
{isAuth && authRoutes.map(({path, Component}) =>
<Route key={path} path={path} component={Component} exact/>
)}
{publicRoutes.map(({path, Component}) =>
<Route key={path} path={path} component={Component} exact/>
)}
</Routes>
);
};
export default AppRouter;
Файл с маршрутами (routes):
import Admin from "./pages/Admin";
import {ADMIN_ROUTE, BASKET_ROUTE, DEVICE_ROUTE, LOGIN_ROUTE, REGISTRATION_ROUTE, SHOP_ROUTE} from "./utils/consts";
import Basket from "./pages/Basket";
import Shop from "./pages/Shop";
import Auth from "./pages/Auth";
import DevicePage from "./pages/DevicePage";
export const authRoutes = [
{
path: ADMIN_ROUTE,
Component: Admin
},
{
path: BASKET_ROUTE,
Component: Basket
},
]
export const publicRoutes = [
{
path: SHOP_ROUTE,
Component: Shop
},
{
path: LOGIN_ROUTE,
Component: Auth
},
{
path: REGISTRATION_ROUTE,
Component: Auth
},
{
path: DEVICE_ROUTE + '/:id',
Component: DevicePage
},
]
Я два часа липнул в код, в итоге не решил проблему. Слово SHOP так и не выводится. Подумал что что-то не так в самой верстке, ибо в консоли выдает ошибки по подключенным стилям, но нет, в отладчике слова SHOP тоже нет.
Господа, прошу, взгляните свежими глазами (а не моими), может быть вам удастся понять что тут не так.