react router如何实现
React Router 实现方法
React Router 是 React 应用中实现路由功能的核心库，用于管理单页应用（SPA）的页面导航。以下是具体实现步骤：
安装 React Router
在项目中安装 react-router-dom（针对 Web 应用）：
npm install react-router-dom基本路由配置
使用 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 组件或 useNavigate Hook 实现导航：
// Link 组件方式
import { Link } from "react-router-dom";
<Link to="/about">About</Link>
// useNavigate Hook 方式
import { useNavigate } from "react-router-dom";
function MyButton() {
const navigate = useNavigate();
return <button onClick={() => navigate("/about")}>Go to About</button>;
}嵌套路由
通过嵌套 Route 实现层级路由结构：
<Route path="/dashboard" element={<Dashboard />}>
<Route path="settings" element={<Settings />} />
<Route path="profile" element={<Profile />} />
</Route>
// Dashboard 组件内需添加 <Outlet /> 渲染子路由
import { Outlet } from "react-router-dom";
function Dashboard() {
return (
<div>
<h1>Dashboard</h1>
<Outlet />
</div>
);
}路由守卫（权限控制）
通过自定义封装实现路由守卫逻辑：
function PrivateRoute({ element }) {
const isAuthenticated = checkAuth(); // 自定义权限检查
return isAuthenticated ? element : <Navigate to="/login" />;
}
// 使用方式
<Route path="/admin" element={<PrivateRoute element={<AdminPanel />} />} />404 页面处理
通过 path="*" 捕获未匹配的路由：
<Route path="*" element={<NotFoundPage />} />代码分割与懒加载
结合 React.lazy 和 Suspense 实现按需加载：
const About = React.lazy(() => import("./About"));
function App() {
return (
<Suspense fallback={<LoadingSpinner />}>
<Route path="/about" element={<About />} />
</Suspense>
);
}通过以上方法，可以覆盖 React Router 的核心功能需求。实际项目中可根据业务场景组合使用这些技术点。
