React学习———React Router

React Router

React Router 是 React 应用中用于管理路由的流行库，它允许你在单页应用（SPA）中实现导航和页面切换而无需重新加载页面。

安装

npm install react-router-dom

核心组件

<BrowserRouter>

• 使用HTML5的历史记录API（pushState、replaceState和popstate事件）来保持UI与URL的同步。
• 通常包裹在应用的根组件中，提供基于浏览器历史记录的路由功能。

import { BrowserRouter } from 'react-router-dom'
function App(){return (<BrowserRouter >{/* 其他组件 */}</BrowserRouter >)
}

<HashRouter>

• 通过监听浏览器的hashchange事件来检测路由变化，因为hash部分不会被服务器解析，所以无需服务器支持。
• 使用方法和BrowserRouter一致，适合静态部署或后端不支持history路由的场景

<Routes>和<Route>

• <Routes>：包裹所有路由规则
• <Route>：定义单个路由，通过path属性指定URL路径、element属性/component属性指定要渲染的组件

import { Routes, Route } from 'react-router-dom'
function App() {return (<Routes><Route path="/" element={<Home />} /></Routes>);
}

<Link>

• 用于应用内导航，替代<a>标签实现导航，生成一个不会导致页面重新加载的链接，避免页面刷新

import { Link } from 'react-router-dom'
function Navbar() {return (<nav><Link to="/" >Home</Link></nav>);
}

<Navigate>

• 用于编程式导航或重定向，例如：当用户访问某个路径时，可以自动重定向到另一个路径

<Route path="/old-path" element={<Navigate to="/new-path" />} />

动态路由

• 通过在路由path中使用冒号:参数名定义参数

import { Route, Routes } from 'react-router-dom'
import User from './User'
<Routes>// 这样 /user/123、/user/abc都会匹配该路由<Route path="/user/:id" element={<User />} />
</Routes>

• 使用*通配符匹配任意路径

import { Route, Routes } from 'react-router-dom'
import User from './User'
<Routes>// 这样 /user/xxx/yyy都会匹配该路由<Route path="/user/*" element={<User />} />
</Routes>

• 获取URL参数: 通过useParams获取动态路径参数

import { useParams } from 'react-router-dom'
function User(){const { id } = useParams()return <div>用户ID：{id}</div>
}

• 获取查询参数：通过useSearchParams获取和修改查询参数

import { useSearchParams} from 'react-router-dom'
function SearchPage(){const [searchParams, setSearchParams] = useSearchParams();const keyword = searchParams.get("q"); // 例如 /search?q=reactreturn (<inputvalue={keyword || ""}onChange={(e) => setSearchParams({ q: e.target.value })}/>);
}

嵌套路由

• 在父路由中定义子路由，用<Outlet>指定子路由渲染位置

// 父组件---使用 <Outlet> 指定子组件的位置：
function Dashboard(){return (<div><h1>Dashboard</h1>{/* 子路由内容在此渲染 */}<Outlet /> </div>)
}// 通过 <Route> 的嵌套结构实现：
<Route path="/dashboard" element={<Dashboard />}><Route path="stats" element={<Stats />} /><Route path="settings" element={<Settings />} />
</Route>

编程试导航

• 使用useNavigate钩子进行跳转

import { useNavigate } from "react-router-dom";
function LoginButton() {const navigate = useNavigate();return (<button onClick={() => {// 跳转到指定路径navigate("/dashboard");// 替换历史记录（无后退）navigate("/dashboard", { replace: true });// 带状态传递navigate("/dashboard", { state: { from: "login" } });}}>Login</button>);
}

路由懒加载（代码分割）

• 使用React.lazy和Suspense优化性能

import React, { lazy, Suspense } from 'react'
import { Routes, Route } from 'react-router-dom'const Home = lazy(() => import('./home.jsx'))
function App(){return (// fallback属性可以自定义加载时的占位内容（如loading动画）<Suspense fallback={<div>加载中。。。</div>}><Routes><Route path='/' element={<Home />}></Route></Routes></Suspense>)
}

高阶组件实现权限控制

• 高阶组件是一种用于复用组件逻辑的高级技术；采用函数接收组件，返回新组件的模式。

function PrivateRoute({children}){consr isAdmin = checkAuth()return isAdmin ? children : <Navigate to='/login' />
}<Route path='/admin' element={<PrivateRoute><Home />
</PrivateRoute>} />

数据加载（v6.4+）

• 使用loader和useLoaderData在路由加载时预取数据

// 定义路由时配置loader
const router = createBrowserRouter([{path: '/user/:userId',element: <User />loader: async ({ params }) => {// 根据URL传递的数据进行接口请求const res = await fetch(`/api/users/${params.userId}`)return res.json()}}
])// 组件中获取数据
import { useLoaderData } from 'react-router-dom'
function User(){// 直接获取 loader 返回的数据const userData = useLoaderData(); return <div>{userData.name}</div>;
}

路由配置简单demo

• 在src目录下创建一个router文件夹管理路由列表

// 用于编程式导航 重定向
import { Navigate } from 'react-router-dom'
// 高阶组件实现权限控制
import AuthRoute from '@/components/AuthRoute'
// 界面排版组件
import Layout from '@/pages/Layout'
import Admin from '@/pages/Admin'
import Login from '@/pages/Login'export const routesList = [{path: '/',element: <Navigate to="/home" />},{path: '/login',element: <Login />},{path: '/admin',element: <Admin />children: [{ { path: 'optical', element: <AuthRoute ><OpticalManage /></AuthRoute> }, }]},
]

• 在App.tsx进行路由配置

interface PageRoute{path: string,element: React.ReactNode,children?: PageRoute[]
}// 使用递归实现 Route 的渲染
function renderRoutes(routes: PageRoute[]) {return routes.map(({ path, element, children }, index) => (<Route key={path || index} path={path} element={element}>{children && renderRoutes(children)}</Route>))
}
function App() {const loading = useSelector<RootState, boolean>(state => state.head.loading)return (<div className="app-view">{loading && <Loading />}<Routes>{ renderRoutes(routesList) }</Routes></div>)
}export default App

常见坑

• 箭头函数体用{}时，必须显示写return

function renderRoutes(routes: PageRoute[]) {return routes.map(({ path, element, children }, index) => {return	<Route key={path || index} path={path} element={element}>{children && renderRoutes(children)}</Route>});
}

• 用()时，直接返回表达式

function renderRoutes(routes: PageRoute[]) {return routes.map(({ path, element, children }, index) => (<Route key={path || index} path={path} element={element}>{children && renderRoutes(children)}</Route>))
}