前端React Router从入门到进阶实战

React Router 是 React 应用中的一个重要库，它用于实现客户端的路由管理，能够将 URL 路径与 React 组件关联起来，从而实现页面之间的导航。React Router 不会像传统的多页面应用那样重新加载页面，而是通过组件切换来呈现不同的视图，这使得 React 应用能够拥有更高的性能和更流畅的用户体验。

React Router 是 React 生态中最常用的路由库，用于在 React 应用中处理页面的导航和路由。它允许开发者通过 URL 映射到不同的组件，从而创建单页应用（SPA）。React Router 通过声明式方式管理路由的配置，支持嵌套路由、动态路由、路由守卫、重定向等功能。

知识框架

1. React Router 基本概念

1.1 路由与组件的关系

React Router 的核心思想是将 URL 与组件关联，匹配到某个路由时，渲染对应的组件。

• Route：表示路径与组件的映射关系。
• Link：在应用中跳转到不同路由的组件。
• BrowserRouter / HashRouter ：为应用提供路由管理，BrowserRouter 使用 HTML5 历史 API，HashRouter 使用哈希值。

1.2 路由的核心组件

• BrowserRouter / HashRouter：路由容器，包裹整个应用，提供路由的上下文。
• Route：定义路径与组件的映射关系。
• Link：用于在应用中进行导航，跳转到指定的路由。
• Switch （React Router v5及以前）/ Routes（React Router v6及以后）：用来确保一次只渲染一个匹配的路由。

1.3 路由的生命周期

React Router 会监听 URL 的变化，当 URL 发生变化时，它会匹配最合适的 Route，并渲染对应的组件。

2. React Router 版本变化

2.1 React Router v5

• Switch ：只有第一个匹配的 Route 会被渲染。Switch 用于包裹路由，并确保在多个路由中，只渲染一个匹配的路由。
• exact：路由精确匹配，表示路径需要完全匹配才会渲染组件。

2.2 React Router v6

• Routes ：取代了 v5 中的 Switch，用于确保只有一个路由匹配时才会渲染。
• Route ：v6 中的 Route 不再有 exact 属性，所有的路由默认都是精确匹配的。
• useNavigate ：取代了 v5 中的 history.push，用于在函数组件中进行编程式导航。
• useRoutes：允许通过配置对象定义路由，简化路由配置和动态路由。
• Outlet：在父路由组件中渲染子路由的占位符。

3.React Router 主要组件

1. Router 组件

React Router 提供了多个 Router 组件来管理路由：

• <BrowserRouter> ：通过 HTML5 的 history API 来保持 UI 和 URL 同步。这是大多数单页应用的推荐使用方式。
• <HashRouter> ：通过 URL 中的 hash 部分（# 后面的部分）来管理路由，适用于不支持 history API 的环境。
• <MemoryRouter>：使用内存中的路由，适用于非浏览器环境（比如服务器端渲染、React Native）。

import { BrowserRouter as Router } from 'react-router-dom';

function App() {
  return (
    <Router>
      {/* 路由定义和组件 */}
    </Router>
  );
}

2. Route 组件

<Route> 用于定义路径和渲染的组件。它根据当前路径来判断是否匹配，并渲染对应的组件。

import { Route } from 'react-router-dom';

<Route path="/home" component={Home} />

• path ：定义匹配的路径，支持通配符（例如 /post/:id）。
• component ：匹配路径时渲染的组件（React Router v5）。在 v6 中使用 element 属性来渲染组件。
• render 和 children：可以提供渲染函数来返回动态内容。

3. Link 组件

<Link> 用于在不同的路由之间进行导航。它通过 to 属性指定目标路由。

import { Link } from 'react-router-dom';

<Link to="/about">About</Link>

4. Switch / Routes 组件

• <Switch> ：在 React Router v5 中，<Switch> 用于包裹多个 <Route>，确保一次只渲染一个匹配的路由。
• <Routes> ：在 React Router v6 中，<Switch> 被替换为 <Routes>，它同样确保只渲染第一个匹配的路由。

import { Routes, Route } from 'react-router-dom';

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

5. useNavigate (React Router v6)

useNavigate 是一个钩子，用于在函数组件中进行编程式导航。

import { useNavigate } from 'react-router-dom';

const SomeComponent = () => {
  const navigate = useNavigate();
  const goToHome = () => {
    navigate('/home');
  };

  return <button onClick={goToHome}>Go to Home</button>;
};

6. useParams

useParams 是一个钩子，用于在路由中获取动态参数（如路径中的 :id）。

import { useParams } from 'react-router-dom';

const Post = () => {
  const { id } = useParams(); // 获取 URL 参数
  return <div>Post ID: {id}</div>;
};

7. useLocation

useLocation 可以访问当前 URL 的信息（路径、查询参数等）。

import { useLocation } from 'react-router-dom';

const CurrentLocation = () => {
  const location = useLocation();
  return <div>Current path: {location.pathname}</div>;
};

8. useMatch

useMatch 用来检查当前的 URL 是否与某个路径匹配，并获取路由参数。

import { useMatch } from 'react-router-dom';

const MatchTest = () => {
  const match = useMatch('/post/:id');
  return match ? <div>Matched Post ID: {match.params.id}</div> : <div>No match</div>;
};

4.React Router 高级用法

1. 嵌套路由

React Router 支持路由嵌套，父组件的路由可以嵌套显示子路由。通过 <Outlet> 占位符渲染子路由。

import { Routes, Route, Outlet } from 'react-router-dom';

const Dashboard = () => (
  <div>
    <h2>Dashboard</h2>
    <Outlet />  {/* 子路由会渲染在这里 */}
  </div>
);

const Settings = () => <div>Settings Page</div>;

function App() {
  return (
    <Routes>
      <Route path="/dashboard" element={<Dashboard />}>
        <Route path="settings" element={<Settings />} />
      </Route>
    </Routes>
  );
}

2. 路由重定向

React Router 允许通过 <Navigate> 实现路由重定向（在 v6 中取代了 v5 中的 <Redirect>）。

import { Navigate } from 'react-router-dom';

<Route path="/old-path" element={<Navigate to="/new-path" />} />

3. 路由守卫

React Router 本身没有内置的路由守卫功能，但可以通过编程方式实现。例如，如果用户没有登录，可以重定向到登录页面。

import { Navigate } from 'react-router-dom';

const ProtectedRoute = ({ children }) => {
  const isAuthenticated = false; // 认证逻辑
  return isAuthenticated ? children : <Navigate to="/login" />;
};

<Routes>
  <Route path="/profile" element={<ProtectedRoute><Profile /></ProtectedRoute>} />
</Routes>

4. 动态加载组件（代码分割）

React Router 可以与 React.lazy() 和 Suspense 一起使用，按需加载组件。

import React, { Suspense, lazy } from 'react';
import { Routes, Route } from 'react-router-dom';

const LazyHome = lazy(() => import('./Home'));

function App() {
  return (
    <Routes>
      <Route path="/" element={<Suspense fallback={<div>Loading...</div>}><LazyHome /></Suspense>} />
    </Routes>
  );
}

5. 查询参数

React Router 提供了获取 URL 查询参数的功能，可以通过 useSearchParams 钩子来处理。

import { useSearchParams } from 'react-router-dom';

const SearchPage = () => {
  const [searchParams, setSearchParams] = useSearchParams();
  const query = searchParams.get('q');  // 获取查询参数
  return <div>Search query: {query}</div>;
};

5.React Router 配置示例

简单路由配置（React Router v6）

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

const Home = () => <h1>Home Page</h1>;
const About = () => <h1>About Page</h1>;

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

动态路由配置

import { BrowserRouter as Router, Routes, Route, useParams } from 'react-router-dom';

const Post = () => {
  const { id } = useParams();  // 获取动态路由参数
  return <h2>Post {id}</h2>;
};

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/post/:id" element={<Post />} />
      </Routes>
    </Router>
  );
}

6. 常用的 React Router 功能实战

3.1 基本用法

import React from 'react';
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';

const Home = () => <div>Home</div>;
const About = () => <div>About</div>;

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
}

export default App;

3.2 动态路由

import React from 'react';
import { BrowserRouter as Router, Route, Link, useParams } from 'react-router-dom';

const Post = () => {
  const { id } = useParams(); // 获取动态路由的参数
  return <div>Post ID: {id}</div>;
};

function App() {
  return (
    <Router>
      <nav>
        <Link to="/post/1">Post 1</Link>
        <Link to="/post/2">Post 2</Link>
      </nav>
      <Route path="/post/:id" component={Post} />
    </Router>
  );
}

export default App;

3.3 编程式导航 (React Router v6)

import React from 'react';
import { useNavigate } from 'react-router-dom';

const Home = () => {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate('/about');
  };

  return (
    <div>
      <h1>Home</h1>
      <button onClick={handleClick}>Go to About</button>
    </div>
  );
};

export default Home;

3.4 嵌套路由

import React from 'react';
import { BrowserRouter as Router, Route, Link, Outlet } from 'react-router-dom';

const Dashboard = () => (
  <div>
    <h2>Dashboard</h2>
    <nav>
      <Link to="settings">Settings</Link>
    </nav>
    <Outlet /> {/* 渲染嵌套路由的占位符 */}
  </div>
);

const Settings = () => <div>Settings Page</div>;

function App() {
  return (
    <Router>
      <Route path="dashboard" element={<Dashboard />}>
        <Route path="settings" element={<Settings />} />
      </Route>
    </Router>
  );
}

export default App;

7. 高级用法实战

4.1 路由重定向

• Redirect （v5）/ Navigate（v6）

v5：

import { Redirect } from 'react-router-dom';

// 重定向到首页
<Route path="/old-path">
  <Redirect to="/" />
</Route>

v6：

import { Navigate } from 'react-router-dom';

<Route path="/old-path" element={<Navigate to="/" />} />

4.2 路由守卫（保护路由）

React Router 本身不提供守卫功能，但可以通过编程方式进行实现，例如根据用户的认证状态来决定是否跳转到登录页。

import { Navigate } from 'react-router-dom';

const ProtectedRoute = ({ element, ...rest }) => {
  const isAuthenticated = false; // 用户是否认证
  return isAuthenticated ? element : <Navigate to="/login" />;
};

// 使用
<Route path="/profile" element={<ProtectedRoute element={<Profile />} />} />

4.3 通过 useLocation 获取当前 URL

import { useLocation } from 'react-router-dom';

const CurrentLocation = () => {
  const location = useLocation();
  return <div>Current URL: {location.pathname}</div>;
};

4.4 动态加载组件

通过 React.lazy 和 Suspense 实现按需加载。

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';

const LazyHome = lazy(() => import('./Home'));

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Route path="/" component={LazyHome} />
      </Suspense>
    </Router>
  );
}

8. React Router 底层核心原理

8.1 核心原理

• 路由监听 ： 通过 window.history 或 window.location.hash 监听 URL 的变化。
• 匹配规则 ： 使用 path-to-regexp 库将路径转换为正则表达式，匹配当前 URL。
• 渲染更新： 匹配的路由组件通过 React 的状态更新机制触发重新渲染。

8.2 关键步骤

1. 路由定义时，存储路径与组件的映射关系。
2. URL 变化时，根据路径规则找到对应组件。
3. 使用 React 渲染匹配的组件。

React Router 底层的核心原理围绕着以下几个关键点：

• 路由匹配：通过 URL 路径与路由配置进行匹配，决定渲染哪个组件。
• history API：通过监听浏览器的历史记录来管理路由变化。
• 虚拟 DOM 更新：通过 React 的更新机制，在路由变化时高效

地更新组件。

• 嵌套路由 ：通过 Outlet 组件来支持父子路由的嵌套渲染。
• 优化渲染：只重新渲染需要更新的组件，提升性能。

理解这些底层原理，能够帮助你更好地使用 React Router，并且在遇到复杂路由需求时，能够更灵活地调整和优化路由配置。

总结

React Router 是构建 React 应用的路由管理工具，具有强大的功能，如支持动态路由、嵌套路由、导航守卫、代码分割等。理解其核心概念及高级用法，可以帮助开发者更高效地构建和维护复杂的 React 应用。