react router如何使用
React Router 的基本使用
React Router 是 React 生态中用于处理路由的核心库，适用于构建单页应用（SPA）。以下是其核心功能和基本用法。
安装 React Router
通过 npm 或 yarn 安装最新版本的 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>
);
}动态路由与参数
通过冒号（:）定义动态路径参数，使用 useParams 获取参数值：
<Route path="/users/:id" element={<UserDetail />} />
// UserDetail 组件内
import { useParams } from "react-router-dom";
function UserDetail() {
const { id } = useParams();
return <div>User ID: {id}</div>;
}导航与链接
使用 Link 组件实现页面间跳转，避免浏览器默认刷新行为：
import { Link } from "react-router-dom";
function Navbar() {
return (
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</nav>
);
}编程式导航
通过 useNavigate Hook 在代码中控制跳转：
import { useNavigate } from "react-router-dom";
function LoginButton() {
const navigate = useNavigate();
return (
<button onClick={() => navigate("/dashboard")}>
Login
</button>
);
}嵌套路由
通过嵌套 Route 组件实现层级路由，配合 Outlet 渲染子路由内容：
<Route path="/dashboard" element={<Dashboard />}>
<Route path="settings" element={<Settings />} />
</Route>
// Dashboard 组件内需包含 Outlet
import { Outlet } from "react-router-dom";
function Dashboard() {
return (
<div>
<h1>Dashboard</h1>
<Outlet /> {/* 子路由内容在此渲染 */}
</div>
);
}路由守卫
通过自定义逻辑实现权限控制，例如未登录重定向：
function PrivateRoute({ children }) {
const isAuthenticated = checkAuth(); // 自定义认证逻辑
const navigate = useNavigate();
if (!isAuthenticated) {
navigate("/login");
return null;
}
return children;
}
// 使用示例
<Route path="/admin" element={<PrivateRoute><AdminPage /></PrivateRoute>} />404 页面处理
通过 path="*" 捕获未匹配的路由：
<Route path="*" element={<NotFoundPage />} />高级功能
路由懒加载
使用 React.lazy 和 Suspense 实现按需加载：
const About = React.lazy(() => import("./About"));
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<Route path="/about" element={<About />} />
</Suspense>
);
}路由状态传递
通过 useLocation 获取路由状态（如 state 参数）：
navigate("/profile", { state: { from: "/home" } });
// Profile 组件内
const location = useLocation();
console.log(location.state.from); // 输出 "/home"路由钩子
常用 Hook 列表：
useParams：获取动态路由参数。useNavigate：编程式导航。useLocation：访问当前路由信息。useSearchParams：处理 URL 查询参数。
注意事项
- 版本兼容性：React Router v6 与 v5 的 API 差异较大，需注意版本选择。
- 服务端渲染：如需 SSR，需配合
StaticRouter或框架集成方案（如 Remix）。 - basename：若应用部署在子路径，可通过
<BrowserRouter basename="/subdir">配置。
以上内容覆盖了 React Router 的核心用法，可根据实际需求选择适合的功能组合。
