react-router如何使用
React Router 的基本用法
安装 React Router 的依赖包：
npm install react-router-dom在应用中引入必要的组件：
import { BrowserRouter as Router, Route, Link, Routes } from 'react-router-dom';路由配置
使用 Router 包裹整个应用，Routes 和 Route 定义路由规则：
function App() {
return (
<Router>
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</Router>
);
}动态路由
通过冒号 : 定义动态参数：
<Route path="/user/:id" element={<UserProfile />} />在组件中获取参数：
import { useParams } from 'react-router-dom';
function UserProfile() {
const { id } = useParams();
return <div>User ID: {id}</div>;
}嵌套路由
使用 Outlet 渲染子路由：
<Route path="/dashboard" element={<Dashboard />}>
<Route path="stats" element={<Stats />} />
<Route path="settings" element={<Settings />} />
</Route>在父组件中放置 Outlet：
function Dashboard() {
return (
<div>
<h1>Dashboard</h1>
<Outlet />
</div>
);
}编程式导航
使用 useNavigate 进行跳转：
import { useNavigate } from 'react-router-dom';
function LoginButton() {
const navigate = useNavigate();
return (
<button onClick={() => navigate('/dashboard')}>
Login
</button>
);
}重定向
使用 Navigate 组件实现重定向：
import { Navigate } from 'react-router-dom';
function PrivateRoute({ isLoggedIn, children }) {
return isLoggedIn ? children : <Navigate to="/login" />;
}404 页面
未匹配路由时显示 404 页面：
<Route path="*" element={<NotFound />} />
