环境：MacOS
路由安装
yarn add react-router-dom
路由库版本："react-router-dom": "^6.17.0",
路由使用
头文件导入
import { Route, Routes, BrowserRouter, Navigate } from 'react-router-dom'
路由表管理
<BrowserRouter>
<Routes>
<Route path="/login" element={<Login />}></Route>
<Route path="/home" element={<Home />}></Route>
<Route exact path="/" element={<Home />}></Route>
</Routes>
{/* <Navigate to={"/home"}></Navigate> */} // 重定向设置
</BrowserRouter>
注意：最新版的路由库，写法跟旧版本有很大区别
路由跳转
- 浏览器直接输入地址
https://xxx.xxx/home - 代码调用:
function LoginButton() {
const navigate = useNavigate();
return (
<button onClick={() => navigate('/home')}>跳转Home页</button>
);
}
注意只有函数组件能动态调用路由
