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新版本的命名更加容易理解，使用更為簡潔了

總結

以上是生活随笔為你收集整理的react-router-dom v6.1.1 使用方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。