React路由配置记录

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

当你的react-router-dom版本为v6之后，将不再支持Switch

Attempted import error: 'Switch' is not exported from 'react-router-dom'

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

React Router v6 引入了一个类似于 Switch 的 Routes 组件，但功能更强大

优点如下：
1.<Routes> 中的所有 <Route> 和 <Link> 都是相对的。这导致 <Route path> 和 <Link to> 中的代码更精简、更可预测;
2.根据最佳匹配选择路线，而不是按顺序遍历。这避免了由于无法访问的路由而导致的错误，因为它们稍后在您的 <Switch> 中定义;
3.路由可以嵌套在一个地方而不是分散在不同的组件中.在中小型应用程序中，这可让您轻松地同时查看所有路线。在大型应用程序中，您仍然可以在通过 React.lazy 动态加载的包中嵌套路由.

component改成了element

<Route path='/boiling' element={<Boiling />} />

来源：[react-router-dom的v6版本更改介绍](https://reactrouter.com/docs/en/v6/upgrading/v5#remove-redirects-inside-switch)