深入理解react-router 路由的实现原理

2023年6月11日上午10:05 • JavaScript

下面是深入理解react-router路由的实现原理的攻略。

1. 路由的概念

路由是指通过URL来定位到特定的页面并展示给用户的过程。在前端 SPA（单页应用）中，我们通常使用第三方库来实现路由功能，其中react-router是使用较为广泛的一种。

2. react-router的实现原理

首先，我们需要了解react-router的实现原理是基于history浏览器历史API的。

2.1 history 对象

history是一个封装了浏览器历史API的对象，可以让我们在代码中操作浏览器地址栏。使用history可以通过以下几种方式改变URL，从而实现路由功能：

pushState：向浏览器历史栈中添加一个状态，并跳转到新的页面。
replaceState：用新的状态替换当前页的历史条目。
popstate：监听浏览器历史变化事件。

2.2 react-router 实现路由

react-router封装了history对象的能力，通过监听history对象的变化来实现路由跳转的功能。

react-router 中，BrowserRouter和HashRouter都是Router的子类，而Router则是history库提供的createBrowserHistory/createHashHistory的封装。这个过程涉及到了history浏览器历史API中的popstate方法，我们来看一下示例代码：

// 创建一个 BrowserRouter
import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';

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

上面代码中，使用了BrowserRouter包裹了多个Route，实现了路径的跳转功能。在BrowserRouter内部，会监听popstate方法处理浏览器地址的变化，再利用Route组件匹配对应的路径，最终渲染对应的组件。如果没有匹配到对应的路径，还可以使用Switch组件来设置默认路由。

2.3 路由传参

有些情况下，我们需要在路由之间传递参数，比如通过 URL 传递参数。react-router提供了两种方式传递参数：params 和 query。

2.3.1 params

使用 params 传参，通过路由路径中的占位符来传递参数。代码示例：

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

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

function About(props) {
  return (
    <div>
      <h1>这是about页面</h1>
      <p>接收到的参数是：{props.match.params.id}</p>
    </div>
  );
}

在上述代码中，我们在Route组件的路径中声明了一个占位符:id，用于接收传递的参数。而在About组件中，可以通过props.match.params.id获取到传递的参数。

2.3.2 query

使用 query 传参，通过 URL 查询字符串来传递参数。代码示例：

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

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

function About(props) {
  return (
    <div>
      <h1>这是about页面</h1>
      <Link to={`/about/detail?id=123`}>跳转到详情页</Link>
    </div>
  );
}

function Detail(props) {
  const query = new URLSearchParams(props.location.search);
  const id = query.get('id');

  return (
    <div>
      <h1>这是详情页</h1>
      <p>接收到的参数是：{id}</p>
      <Link to="/about">返回</Link>
    </div>
  );
}

在上述代码中，我们使用Link组件来传递参数，点击后会在 URL 中携带查询字符串id=123。在Detail组件中，通过props.location.search获取到查询字符串，并通过URLSearchParams对象来解析得到传递的参数。