react路由实现切换
React 路由实现切换的方法
在 React 中实现路由切换通常使用 react-router-dom 库，以下是常见的实现方式：
安装依赖
确保项目已安装 react-router-dom：
npm install react-router-dom基本路由配置
使用 BrowserRouter 包裹应用，并定义路由规则：
import { BrowserRouter, Routes, Route } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/about" element={<AboutPage />} />
</Routes>
</BrowserRouter>
);
}路由跳转方式
1. 使用 <Link> 组件
import { Link } from 'react-router-dom';
function Navbar() {
return (
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</nav>
);
}2. 编程式导航
通过 useNavigate Hook 实现：
import { useNavigate } from 'react-router-dom';
function Button() {
const navigate = useNavigate();
return (
<button onClick={() => navigate('/about')}>
Go to About
</button>
);
}动态路由与参数传递
定义动态路由：
<Route path="/user/:id" element={<UserPage />} />获取路由参数：
import { useParams } from 'react-router-dom';
function UserPage() {
const { id } = useParams();
return <div>User ID: {id}</div>;
}嵌套路由实现
通过 <Outlet> 组件实现嵌套布局：
<Route path="/dashboard" element={<DashboardLayout />}>
<Route index element={<DashboardHome />} />
<Route path="settings" element={<DashboardSettings />} />
</Route>在布局组件中渲染子路由：
function DashboardLayout() {
return (
<div>
<Sidebar />
<Outlet />
</div>
);
}路由守卫（权限控制）
通过高阶组件或自定义逻辑实现：
function PrivateRoute({ children }) {
const isAuthenticated = checkAuth();
return isAuthenticated ? children : <Navigate to="/login" />;
}
// 使用方式
<Route path="/admin" element={<PrivateRoute><AdminPage /></PrivateRoute>} />404 页面处理
添加通配符路由匹配未定义的路径：
<Route path="*" element={<NotFoundPage />} />以上方法覆盖了 React 路由切换的主要场景，可根据实际需求组合使用。
