react router如何实现
React Router 实现方法
React Router 是 React 应用中用于管理路由的核心库，支持动态路由匹配、导航和页面渲染。以下是实现 React Router 的详细步骤：
安装 React Router
通过 npm 或 yarn 安装 react-router-dom（针对 Web 应用）：
npm install react-router-dom
# 或
yarn add react-router-dom基本路由配置
在应用入口文件（如 App.js）中配置路由。使用 BrowserRouter 作为根组件，Routes 和 Route 定义路径与组件的映射关系：
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./Home";
import About from "./About";
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</BrowserRouter>
);
}动态路由与参数
通过 :param 语法捕获动态参数，使用 useParams 获取参数值：
<Route path="/user/:id" element={<UserProfile />} />
// 在 UserProfile 组件中
import { useParams } from "react-router-dom";
function UserProfile() {
const { id } = useParams();
return <div>User ID: {id}</div>;
}导航与链接
使用 Link 或 NavLink 实现页面间导航，避免全页面刷新：
import { Link } from "react-router-dom";
function Navbar() {
return (
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</nav>
);
}嵌套路由
通过 <Outlet> 在父组件中渲染子路由，实现嵌套布局：
<Route path="/dashboard" element={<Dashboard />}>
<Route path="stats" element={<Stats />} />
<Route path="settings" element={<Settings />} />
</Route>
// Dashboard 组件需包含 Outlet
function Dashboard() {
return (
<div>
<h1>Dashboard</h1>
<Outlet />
</div>
);
}编程式导航
通过 useNavigate 在代码中跳转路由：
import { useNavigate } from "react-router-dom";
function LoginButton() {
const navigate = useNavigate();
const handleLogin = () => navigate("/dashboard");
return <button onClick={handleLogin}>Login</button>;
}路由守卫
通过封装高阶组件或直接在路由配置中检查权限：
<Route
path="/admin"
element={isAdmin ? <AdminPanel /> : <Navigate to="/login" />}
/>404 页面处理
未匹配路径时显示自定义组件：
<Route path="*" element={<NotFound />} />注意事项
- 版本兼容性：React Router v6 与 v5 语法差异较大，需注意版本选择。
- 服务端渲染：如需 SSR，需配合
StaticRouter或框架集成方案（如 Next.js）。 - 懒加载：结合
React.lazy和Suspense实现路由级代码分割：const About = React.lazy(() => import("./About")); <Suspense fallback={<Spinner />}> <Route path="/about" element={<About />} /> </Suspense>
