当前位置：首页 > React

react中如何路由

2026-02-26 08:35:56React

路由基础概念

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

npm install react-router-dom

基本路由配置

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

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

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

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

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

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

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>

导航与链接

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

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

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

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

动态路由与参数

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

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

查询参数
通过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处理

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

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

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差异。

react中如何路由