我有一个consts.js文件
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'
我有一个routes.js文件
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;
我得到了错误export 'Switch' (imported as 'Switch') was not found in 'react-router-dom'
。我尝试了所有的变体,尝试将Switch
替换为Router
等,但没有任何帮助。我知道他们删除了react-router-dom@6.0
中的Switch
,但我不知道如何修复此代码使其工作。
2条答案
按热度按时间juud5qan1#
react-router-dom@6
中的Routes
组件取代了Switch
组件。此外,Route
组件API也发生了变化,不再使用component
、render
和children
函数属性,而是使用单个element
属性,该属性取React.ReactNode
(又名JSX)值。示例:
有关从v5到v6的所有重大更改的更多详细信息,请参见Migrate from v5指南。
xt0899hw2#
对于react-router-dom v6,必须使用浏览器路由器和路由组件