react中如何路由

路由基础概念

在React中，路由用于管理不同页面或视图之间的导航，无需重新加载整个页面。核心库是react-router-dom，需通过npm或yarn安装：

npm install react-router-dom

基本路由配置

1. BrowserRouter组件
   包裹整个应用，提供路由上下文：

   import { BrowserRouter as Router } from 'react-router-dom';
   function App() {
     return <Router>{/* 其他组件 */}</Router>;
   }

2. Route组件
   定义路径与组件的映射关系：

   import { Route } from 'react-router-dom';
   <Route path="/about" component={About} />

   或使用element属性（v6版本推荐）：

   <Route path="/about" element={<About />} />

3. Switch组件（v5）或Routes（v6）
   v5中Switch确保仅匹配第一个符合条件的路由：

   import { Switch, Route } from 'react-router-dom';
   <Switch>
     <Route path="/" exact component={Home} />
     <Route path="/users" component={Users} />
   </Switch>

   v6中改用Routes，且exact不再需要：

   import { Routes, Route } from 'react-router-dom';
   <Routes>
     <Route path="/" element={<Home />} />
     <Route path="/users" element={<Users />} />
   </Routes>

导航与链接

1. Link组件
   生成不会刷新页面的导航链接：

   import { Link } from 'react-router-dom';
   <Link to="/about">关于</Link>

2. 编程式导航
   通过useNavigate钩子（v6）或history对象（v5）跳转：

   // v6
   import { useNavigate } from 'react-router-dom';
   function Button() {
     const navigate = useNavigate();
     return <button onClick={() => navigate('/profile')}>跳转</button>;
   }

动态路由与参数

1. 路径参数
   使用冒号语法定义动态段，通过useParams获取：

   <Route path="/user/:id" element={<UserDetail />} />
   // 组件内
   import { useParams } from 'react-router-dom';
   function UserDetail() {
     const { id } = useParams();
     return <div>User ID: {id}</div>;
   }

2. 查询参数
   通过useSearchParams（v6）或URLSearchParams解析：

   import { useSearchParams } from 'react-router-dom';
   function Search() {
     const [searchParams] = useSearchParams();
     const query = searchParams.get('q');
     return <div>搜索词: {query}</div>;
   }

嵌套路由

v6中通过<Outlet>实现嵌套路由的组件渲染：

// 父路由配置
<Route path="/dashboard" element={<Dashboard />}>
  <Route path="stats" element={<Stats />} />
</Route>

// Dashboard组件内
import { Outlet } from 'react-router-dom';
function Dashboard() {
  return (
    <div>
      <h1>仪表盘</h1>
      <Outlet /> {/* 子路由内容在此渲染 */}
    </div>
  );
}

重定向与404处理

1. 重定向
   使用Navigate组件（v6）或Redirect（v5）：

   // v6
   import { Navigate } from 'react-router-dom';
   <Route path="/old" element={<Navigate to="/new" replace />} />

2. 404页面
   在路由列表最后添加path="*"的兜底路由：

   <Route path="*" element={<NotFound />} />

路由守卫

通过高阶组件或自定义逻辑控制访问权限：

function PrivateRoute({ element }) {
  const isAuthenticated = checkAuth();
  return isAuthenticated ? element : <Navigate to="/login" />;
}

// 使用
<Route path="/admin" element={<PrivateRoute element={<Admin />} />} />

以上方法覆盖了React路由的核心用法，适用于大多数场景。根据项目需求选择v5或v6版本，注意API差异。