react如何组织路由
React 路由的组织方式
React 路由通常通过 react-router-dom 库实现，以下是一些常见的路由组织方式：
1. 基础路由配置
使用 BrowserRouter 或 HashRouter 包裹应用，并在内部通过 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>
);
}2. 嵌套路由
通过 Route 嵌套实现层级路由，父路由的组件中需使用 <Outlet /> 渲染子路由。
<Routes>
<Route path="/dashboard" element={<Dashboard />}>
<Route path="profile" element={<Profile />} />
<Route path="settings" element={<Settings />} />
</Route>
</Routes>3. 动态路由
使用 : 定义动态参数，通过 useParams 获取参数值。
<Route path="/user/:id" element={<UserDetail />} />
// UserDetail 组件内
const { id } = useParams();4. 路由懒加载
通过 React.lazy 和 Suspense 实现按需加载组件。
const About = React.lazy(() => import('./About'));
<Routes>
<Route path="/about" element={
<Suspense fallback={<Loading />}>
<About />
</Suspense>
} />
</Routes>5. 路由守卫 通过高阶组件或自定义逻辑控制路由访问权限。
function PrivateRoute({ element }) {
const isAuthenticated = checkAuth();
return isAuthenticated ? element : <Navigate to="/login" />;
}
<Route path="/admin" element={<PrivateRoute element={<Admin />} />} />6. 集中式路由配置 将路由配置抽离为独立文件，便于管理。
// routes.js
export const routes = [
{ path: '/', element: <Home /> },
{ path: '/about', element: <About /> }
];
// App.js
<Routes>
{routes.map((route) => (
<Route key={route.path} {...route} />
))}
</Routes>7. 404 路由处理
使用 path="*" 捕获未匹配路径。
<Route path="*" element={<NotFound />} />8. 编程式导航
通过 useNavigate 实现代码跳转。
const navigate = useNavigate();
navigate('/about', { state: { fromHome: true } });注意事项
- 确保
react-router-dom版本为 v6 或更高，语法与旧版差异较大。 - 嵌套路由的父组件需显式渲染
<Outlet />。 - 动态路由参数可通过
useParams或useMatch获取。 - 路由懒加载需配合
Suspense提供加载状态。
