I have a consts.js file
export const ADMIN_ROUTE = '/admin'
export const LOGIN_ROUTE = '/login'
export const REGISTRATION_ROUTE = '/registration'
export const SHOP_ROUTE = '/'
export const BASKET_ROUTE = '/basket'
export const DEVICE_ROUTE = '/product'
I have a routes.js file
import Admin from "./pages/Admin"
import Auth from "./pages/Auth"
import Basket from "./pages/Basket"
import DevicePage from "./pages/DevicePage"
import Shop from "./pages/Shop"
import {
ADMIN_ROUTE,
BASKET_ROUTE,
DEVICE_ROUTE,
LOGIN_ROUTE,
REGISTRATION_ROUTE,
SHOP_ROUTE
} from "./utils/consts"
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
},
]
App.js
import { BrowserRouter } from "react-router-dom";
import AppRouter from "./components/AppRouter";
function App() {
return (
<BrowserRouter>
<AppRouter/>
</BrowserRouter>
);
}
export default App;
AppRouter.js
import React from 'react';
import { Switch, Route, Redirect } from 'react-router-dom';
import { authRoutes, publicRoutes } from '../routes';
const AppRouter = () => {
const isAuth = false;
return (
<Switch>
{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 />
)}
</Switch>
);
};
export default AppRouter;
I get the error, export 'Switch' (imported as 'Switch') was not found in 'react-router-dom'
. I tried all variants, tried to replace Switch
with Router
and so on, but nothing helps. I know they removed Switch
in [email protected]
, but I don’t understand how to fix this code to make it work.