【React】详解 React Router

React Router 是一个用于 React 应用的路由库。它使得在单页应用（SPA）中能够实现多页面的导航，并且保留了浏览器的历史记录功能。通过 React Router，可以轻松地在不同的 URL 路径之间切换，从而创建具有多页面效果的单页应用。本文将深入探讨 React Router 的基本概念、核心组件、使用方法及其在实际项目中的应用。通过本文，你将全面了解 React Router 的工作机制，并掌握如何在 React 项目中有效地使用它。

一、React Router 的基本概念

1. 什么是 React Router？

React Router 是一个为 React 设计的路由库，用于在应用中实现页面导航。它允许你定义不同的 URL 路径，并根据这些路径渲染相应的组件，从而实现页面的切换。

2. React Router 的主要特性

• 声明式路由：通过定义组件的方式来配置路由。
• 嵌套路由：支持在父路由中嵌套定义子路由。
• 动态路由：支持在 URL 中使用参数，从而实现动态路由匹配。
• 程序化导航：允许通过代码控制路由跳转。
• 浏览器历史记录：与浏览器的历史记录 API 集成，支持前进和后退操作。

二、React Router 的核心组件

React Router 提供了多个核心组件，用于实现不同的路由功能。理解这些组件的作用和相互关系是掌握 React Router 的关键。

1. BrowserRouter

BrowserRouter 是一个高阶组件，用于包裹整个应用，提供路由功能。它使用 HTML5 的 history API 来保持 UI 和 URL 的同步。

示例：使用 BrowserRouter 包裹应用

import { BrowserRouter } from 'react-router-dom';
import App from './App';

function Root() {
  return (
    <BrowserRouter>
      <App />
    </BrowserRouter>
  );
}

export default Root;

2. Route

Route 是用于定义路由规则的组件。它根据当前 URL 渲染对应的组件。每个 Route 组件都需要一个 path 属性，用于指定匹配的 URL 路径。

示例：定义基本路由

import { Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';

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

export default App;

3. Link

Link 组件用于创建导航链接，用户点击链接后，浏览器的 URL 会更新，同时应用渲染相应的组件。它类似于 HTML 中的 <a> 标签，但不会导致页面刷新。

示例：创建导航链接

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

function Navigation() {
  return (
    <nav>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
      </ul>
    </nav>
  );
}

export default Navigation;

4. Switch

Switch 组件用于包裹一组 Route 组件，一次仅渲染匹配的第一个路由。它确保了路由匹配的独占性，避免渲染多个路由组件。

示例：使用 Switch 包裹路由

import { Switch, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';

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

export default App;

三、React Router 的使用方法

了解了 React Router 的基本概念和核心组件后，我们来看看 React Router 的实际使用方法。以下是一个简单的示例，演示如何在 React 应用中使用 React Router 实现多页面导航。

1. 安装 React Router

首先，我们需要安装 React Router 库。

npm install react-router-dom

2. 定义路由组件

创建几个示例组件，用于路由导航。

// Home.js
import React from 'react';

function Home() {
  return <h2>Home Page</h2>;
}

export default Home;

// About.js
import React from 'react';

function About() {
  return <h2>About Page</h2>;
}

export default About;

// Contact.js
import React from 'react';

function Contact() {
  return <h2>Contact Page</h2>;
}

export default Contact;

3. 配置路由

在主应用组件中配置路由规则，并使用 BrowserRouter 包裹整个应用。

// App.js
import React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';

function App() {
  return (
    <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/about">About</Link></li>
            <li><Link to="/contact">Contact</Link></li>
          </ul>
        </nav>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
        </Switch>
      </div>
    </BrowserRouter>
  );
}

export default App;

4. 启动应用

启动应用，验证路由导航是否正常工作。

npm start

四、React Router 的进阶应用

1. 动态路由

React Router 支持在 URL 中使用参数，从而实现动态路由匹配。通过 :param 语法，可以在路由路径中定义参数。

示例：定义动态路由

import React from 'react';
import { BrowserRouter, Switch, Route, useParams } from 'react-router-dom';

function User() {
  let { id } = useParams();
  return <h2>User ID: {id}</h2>;
}

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/user/:id" component={User} />
      </Switch>
    </BrowserRouter>
  );
}

export default App;

2. 嵌套路由

React Router 支持在父路由中嵌套定义子路由。通过嵌套路由，可以实现复杂的页面结构。

示例：定义嵌套路由

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

function Topics() {
  let { path, url } = useRouteMatch();
  return (
    <div>
      <h2>Topics</h2>
      <ul>
        <li><Link to={`${url}/topic1`}>Topic 1</Link></li>
        <li><Link to={`${url}/topic2`}>Topic 2</Link></li>
      </ul>
      <Switch>
        <Route exact path={path}>
          <h3>Please select a topic.</h3>
        </Route>
        <Route path={`${path}/:topicId`}>
          <Topic />
        </Route>
      </Switch>
    </div>
  );
}

function Topic() {
  let { topicId } = useParams();
  return <h3>Selected Topic ID: {topicId}</h3>;
}

function App() {
  return (
    <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/topics">Topics</Link></li>
          </ul>
        </nav>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/topics" component={Topics} />
        </Switch>
      </div>
    </BrowserRouter>
  );
}

export default App;

3. 程序化导航

除了使用 Link 组件创建导航链接外，React Router 还支持通过代码控制路由跳转。使用 useHistory 钩子可以实现程序化导航。

示例：实现程序化导航

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

function Home() {
  let history = useHistory();

  function handleClick() {
    history.push('/about');
  }

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

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

export default App;

五、React Router 的最佳实践

1. 使用 Hooks

React Router 提供了多个 hooks（如 useParams、useRouteMatch 和 useHistory）来简化路由相关的操作。尽量使用 hooks 来替代类组件中的相关方法。

2. 延迟加载组件

对于大型应用，可以使用 React 的 lazy 和 Suspense 组件来实现路由组件的延迟加载，从而提高应用性能。

示例：实现延迟加载组件

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

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

function App() {
  return (
    <BrowserRouter>
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
        </Switch>
      </Suspense>
    </BrowserRouter>
  );
}

export default App;