react-router-dom @6版本API变动
前言
最近发现react-router-dom已经有6版本了，于是决定体验一把。
安装
npm i react-router-dom 复制代码
我的默认是6.0.2版本
使用时候发现Switch引入Ts报错
变动
1.Switch替换成了Routes；
2.Route去除exact；
3.Route中统一使用element属性，去掉原来的component和render；
4.useNavigate取代useHistory;
总的来说： 更加语义化、使用更为简洁。
使用
App.tsx
import { BrowserRouter, Route, Routes } from "react-router-dom"; import { Home } from "./page/home"; import { Login } from "./page/login"; import { Page1 } from "./page/page1"; function App() { return ( <div className="App"> <BrowserRouter> <h1>router6</h1> <Routes> <Route path={"/"} element={<Home />}></Route> <Route path={"/login"} element={<Login />}></Route> <Route path={"/page1/*"} element={<Page1 />}></Route> <Route path={"/404"} element={<div>404</div>}></Route> </Routes> </BrowserRouter> </div> ); } export default App; 复制代码home.tsx
import { Link } from "react-router-dom"; export const Home = () => { return ( <> <h2>Where to, buddy?</h2> <ul> <li> <Link to={"/login"}>login</Link> </li> <li> <Link to={"/page1"}>page1</Link> </li> </ul> </> ); }; 复制代码login.tsx(含useNavigate的使用)
import { useNavigate } from "react-router-dom"; export const Login = () => { const nav = useNavigate(); const goHome = () => { nav("/"); }; return ( <> <button onClick={goHome}>go Home</button> <br /> login </> ); }; 复制代码注意：useNavigate()不可以放到goHome函数里面会报错
const goHome = () => { const nav = useNavigate(); nav("/"); }; 复制代码page1.tsx(嵌套使用)
import { Route, Routes } from "react-router-dom"; export const Page1 = () => { return ( <> <h3>page1</h3> <Routes> <Route path={"page1-1"} element={<>page1-1</>}></Route> <Route path={"page1-2"} element={<>page1-2</>}></Route> </Routes> </> ); }; 复制代码以上就是一些变更的使用方法，同时新API:Outlet，但没搞懂有啥用。
作者：逆风起飞
链接：https://juejin.cn/post/7029615069679845384