Rc-router-dom react 导入 react-router-dom引入Switch报 ‘Switch‘ is not exported from ‘react-router-dom‘

react-router-dom从V5升级到V6后，有些使用做了一些改变：

(1) Switch 重命名为 Routes

// v5

// v6

} />

} />

(2) Route 的新特性变更 ,component/render被element替代

import Profile from './Profile';

// v5

path=":userId"

render={routeProps => (

)}

/>

// v6

} />

} />

(3) 嵌套路由变得更简单

具体变化有以下：

Route children 已更改为接受子路由。比Route exact 和 Route strict更简单的匹配规则。Route path 路径层次更清晰。

v5 中的嵌套路由必须非常明确定义，且要求在这些组件中包含许多字符串匹配逻辑.

// v5

import {

BrowserRouter,

Switch,

Route,

Link,

useRouteMatch

} from 'react-router-dom';

function App() {

return (

);

}

function Profile() {

let { path, url } = useRouteMatch();

return (

);

}

v6 中，你可以删除字符串匹配逻辑。不需要任何 useRouteMatch()

// v6

import {

BrowserRouter,

Routes,

Route,

Link,

Outlet

} from 'react-router-dom';

function App() {

return (

} />

} />

);

}

function Profile() {

return (

);

}

当然，还有更酸爽的操作，直接在路由里定义的，然后用接下来的一个新API：Outlet

新API:Outlet

function App() {

return (

} />

}>

} />

} />

);

}

function Profile() {

return (

)

}

多个 Routes

以前，我们只能在 React App 中使用一个 Routes。但是现在我们可以在 React App 中使用多个路由，这将帮助我们基于不同的路由管理多个应用程序逻辑。

import React from 'react';

import { Routes, Route } from 'react-router-dom';

function Dashboard() {

return (

);

}

function App() {

return (

} />

} />

);

}

(4) 用 useNavigate 代替 useHistory

v5

// v5

import { useHistory } from 'react-router-dom';

function MyButton() {

let history = useHistory();

function handleClick() {

history.push('/home');

};

return Submit;

};

v6

// v6

import { useNavigate } from 'react-router-dom';

function MyButton() {

let navigate = useNavigate();

function handleClick() {

navigate('/home');

};

return Submit;

};

history的用法也将被替换成navigate

// v5

history.push('/home');

history.replace('/home');

// v6

navigate('/home');

navigate('/home', {replace: true});

(5) 新钩子 useRoutes 代替 react-router-config

function App() {

let element = useRoutes([

{ path: '/', element: },

{ path: 'dashboard', element: },

{ path: 'invoices',

element: ,

children: [

{ path: ':id', element: },

{ path: 'sent', element: }

]

},

// 重定向

{ path: 'home', redirectTo: '/' },

// 404找不到

{ path: '*', element: }

]);

return element;

}

(6) 大小减少：从20kb到8kb React Router v6给我们带来方便的同时，还把包减少了一半以上的体积

原文链接：https://blog.csdn.net/weixin_40906515/article/details/104957712

查看原文