路由（React-Router）
如果你是在学习前端开发React-Router 是 React 应用中最常用的路由管理库用于实现单页面应用SPA的页面切换而不需要浏览器刷新。目前主流版本是React Router 官方文档一、什么是路由传统网站https://xxx.com/login https://xxx.com/user https://xxx.com/order每访问一个页面浏览器都会向服务器重新请求页面。React SPAhttps://xxx.com/login https://xxx.com/user https://xxx.com/orderURL变化了但实际上只有一个 HTML 页面。React Router 根据 URL 显示不同组件。例如/login - Login组件 /user - User组件 /order - Order组件二、安装React Router v7npm install react-router或者yarn add react-router三、基础使用1. 创建页面Login.jsxexport default function Login() { return h1登录页/h1; }Home.jsxexport default function Home() { return h1首页/h1; }2. 配置路由main.jsximport React from react; import ReactDOM from react-dom/client; import { createBrowserRouter, RouterProvider, } from react-router; import Home from ./pages/Home; import Login from ./pages/Login; const router createBrowserRouter([ { path: /, element: Home /, }, { path: /login, element: Login /, }, ]); ReactDOM.createRoot(document.getElementById(root)).render( RouterProvider router{router} / );四、路由跳转Link类似HTML中的a标签import { Link } from react-router; function App() { return ( Link to/首页/Link Link to/login 登录 /Link / ); }效果首页 登录点击不会刷新页面。五、编程式导航useNavigate跳转import { useNavigate } from react-router; function Login() { const navigate useNavigate(); return ( button onClick{() navigate(/home)} 登录 /button ); }返回上一页navigate(-1);前进一页navigate(1);六、嵌套路由项目中最常用。例如后台管理系统/ ├─ 首页 ├─ 用户管理 ├─ 订单管理路由配置const router createBrowserRouter([ { path: /, element: Layout /, children: [ { index: true, element: Home /, }, { path: user, element: User /, }, { path: order, element: Order /, }, ], }, ]);Layout组件import { Outlet } from react-router; function Layout() { return ( h1后台系统/h1 Outlet / / ); }Outlet相当于router-view /用于显示子路由。七、动态路由路由配置{ path: /user/:id, element: User / }获取参数import { useParams } from react-router; function User() { const { id } useParams(); return h1{id}/h1; }访问/user/1001输出1001八、Query参数URL/user?id1001获取import { useSearchParams } from react-router; function User() { const [params] useSearchParams(); console.log( params.get(id) ); }结果1001九、路由守卫权限控制React Router 没有像 Vue 那样的全局守卫。通常封装组件function AuthRoute({ children }) { const token localStorage.getItem(token); if (!token) { return Navigate to/login /; } return children; }使用{ path: /user, element: ( AuthRoute User / /AuthRoute ) }十、404页面{ path: *, element: NotFound / }十一、懒加载大型项目必用。User.jsximport { lazy, Suspense, } from react; const User lazy( () import(./User) );路由{ path: /user, element: ( Suspense fallback{divLoading.../div} User / /Suspense ) }
