react项目如何配置route
配置 React 项目路由
在 React 项目中配置路由通常使用 react-router-dom 库。以下是具体实现步骤：
安装依赖
确保项目已安装 react-router-dom：
npm install react-router-dom基本路由配置
在项目入口文件（如 App.js）中配置路由：
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</Router>
);
}动态路由
支持参数传递的路由配置：
<Route path="/user/:id" element={<UserProfile />} />在组件中通过 useParams 获取参数：
import { useParams } from 'react-router-dom';
function UserProfile() {
const { id } = useParams();
return <div>User ID: {id}</div>;
}嵌套路由
实现多级路由嵌套：
<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>
);
}编程式导航
通过 useNavigate 实现跳转：
import { useNavigate } from 'react-router-dom';
function LoginButton() {
const navigate = useNavigate();
return <button onClick={() => navigate('/dashboard')}>Login</button>;
}路由守卫
通过封装高阶组件实现权限控制：
function PrivateRoute({ element }) {
const isAuthenticated = checkAuth(); // 自定义鉴权逻辑
return isAuthenticated ? element : <Navigate to="/login" />;
}
// 使用方式
<Route path="/admin" element={<PrivateRoute element={<AdminPage />} />} />404 页面处理
添加兜底路由匹配：
<Route path="*" element={<NotFoundPage />} />注意事项
- React Router v6 使用
Routes替代旧版的Switch - 路径匹配规则已改为完全匹配（需用
*实现部分匹配） - 嵌套路由语法与旧版有较大差异，需注意组件结构
以上配置可根据实际项目需求调整路由层级和权限控制逻辑。
