react中如何路由
React 路由的实现方法
React 路由通常通过 react-router-dom 库实现，该库提供了一套完整的路由解决方案。以下是常见的路由实现方式。
安装依赖
确保项目已安装 react-router-dom，可通过以下命令安装：
npm install react-router-dom基本路由配置
在项目入口文件（如 App.js）中引入路由组件并配置路径：
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</Router>
);
}动态路由
动态路由允许通过 URL 传递参数：
<Route path="/user/:id" element={<UserProfile />} />在目标组件中通过 useParams 获取参数：
import { useParams } from 'react-router-dom';
function UserProfile() {
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 实现编程式跳转：
import { useNavigate } from 'react-router-dom';
function LoginButton() {
const navigate = useNavigate();
return (
<button onClick={() => navigate('/dashboard')}>
Login
</button>
);
}嵌套路由
嵌套路由用于实现多层级的页面结构：
<Route path="/dashboard" element={<Dashboard />}>
<Route path="profile" element={<Profile />} />
<Route path="settings" element={<Settings />} />
</Route>父组件中需使用 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={<Admin />} />} />404 页面处理
未匹配路径时显示自定义页面：
<Route path="*" element={<NotFound />} />注意事项
react-router-domv6 版本与 v5 语法差异较大，需注意版本兼容性。- 嵌套路由需配合
Outlet使用，确保子路由正确渲染。 - 动态路由参数可通过
useParams获取，适用于数据驱动的场景。
