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 提供加载状态。