v5版本例子代碼
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'
import App from '@/App'
import Home from '@/views/Home/Home'
import Fast from '@/views/Fast/Fast'
import User from '@/views/User/User'const BaseRouter = () => {return (<Router><Switch><Route path="/" component={()=>(<App><Switch><Route exact path="/home" component={Home}></Route><Route exact path="/fast" component={Fast}></Route><Route exact path="/user" component={User}></Route></Switch></App>)}></Route></Switch></Router>)
}
export default BaseRouter今晚使用使用v6.1.1重寫了下
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import App from "@/App";
import Home from "@/views/Home/Home";
import Fast from "@/views/Fast/Fast";
import User from "@/views/User/User";const BaseRouter = () => {return (<Router><Routes><Route path="/" element={<App />}><Route path="/home" element={<Home />}></Route><Route path="/fast" element={<Fast />}></Route><Route path="/user" element={<User />}></Route></Route></Routes></Router>);
};
export default BaseRouter;?
做個總結，react-router-dom@6相比之前的版本存在以下一些變化（以上demo中涉及到的）
1.BrowserRouter保持不變；
2.Switch替換成了Routes；
3.Route中統一使用element屬性，去掉原來的component和render；
4.子路由可以省略上級路由了，比如/page1/page1-1以往需要寫完整的Path，而目前可以繼承上級頁面的路由了，甚至斜線都可以省略；
5.useNavigate取代useHistory，并且api也有相應的變化；
6.新增了Outlet，作用相當于{this.props.children}。
從主觀上看，react-router-dom@6新版本的命名更加容易理解，使用更為簡潔了
.)
