初探 React Router：为手写路由筑牢基础

2401_86373285

829人浏览 · 2025-09-01 16:58:30

2401_86373285 · 2025-09-01 16:58:30 发布

在 React 生态中，单页应用（SPA）的开发离不开 “路由” 这一关键技术。它能让我们在不刷新页面的情况下，实现组件间的灵活切换，打造出类多页应用的体验。而 React Router 就是 React 世界里处理路由的核心工具集。在尝试手写 React Router 之前，我们需要先深入理解它的核心概念与运作逻辑。

用简单示例认识 React Router

在 React 里做单页应用，就像在一个大网页里装很多小 “页面”（其实是不同组件）。要实现点个链接，不刷新页面就切换这些小 “页面”，就得靠路由。React Router 就是干这个活儿的工具。在自己动手写 React Router 之前，咱们先结合示例，把它的关键知识和用法搞明白。

一、路由是干啥的

单页应用就一个 HTML 文件，但里面会有好几个不同的 “页面”（用不同组件展示）。路由要做两件事：

不同网址对应不同组件：比如网址是
```
/home
```
就显示首页组件，
```
/about
```
就显示关于页组件。
切换时不刷新页面：点来点去，浏览器不会整个重新加载，体验更流畅。

能做到这两点的，就是路由。

二、React Router 都有啥

React Router 不是一个单独的库，是一套工具：

```
react-router
```
：核心库，里面是路由最基础的逻辑，像怎么匹配路径、怎么传数据这些。
```
react-router-dom
```
：基于核心库，专门给浏览器用的，能处理浏览器地址栏这些事儿，我们开发网页应用主要用它。

先给项目装上它，后面示例要用：

npm install react-router-dom

三、两种路由模式

路由得看网址来选组件，有两种看网址的方式，咱们结合示例里的配置来理解。

（一）哈希路由（HashRouter）

看网址里

后面的内容，比如

https://xxx.com/#/home

里的

#/home

。

为啥用哈希？因为

后面的内容变了，浏览器不会刷新页面，所以兼容性很好，老浏览器也能用。如果示例里想用这种模式，只要把代码里的

BrowserRouter

换成

HashRouter

就行

（二）浏览器历史路由（BrowserRouter）

HTML5 出来后，浏览器有了新能力，能改网址还不刷新页面。

浏览器的历史记录是像栈一样存着的，还有专门的 API：

```
history.length
```
：看看历史记录有多少条。
```
history.pushState
```
：往历史记录里加一条新的。
```
history.replaceState
```
：替换当前的历史记录。

BrowserRouter 就是用这些 API，看网址里的路径（比如

https://xxx.com/home

里的

/home

）来选组件。这种模式的网址没有

，看起来更干净，但得浏览器支持 HTML5 才行。咱们下面的示例就用这种模式。

四、核心组件是啥作用（附示例）

React Router 有几个关键组件，各司其职，咱们直接用一个 “首页 + 关于页” 的示例，看它们怎么配合工作：

import React from 'react';
// 从 react-router-dom 里引入需要的组件
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';

// 1. 先写两个要切换的“页面”组件
function Home() {
  return <h1>我是首页</h1>;
}
function About() {
  return <h1>我是关于页</h1>;
}

// 2. 根组件里配置路由
function App() {
  return (
    {/* （1）Router 组件：包裹整个应用，选 BrowserRouter 模式 */}
    <Router>
      <div style={{ padding: '20px' }}>
        {/* （2）Link 组件：生成导航链接，点它换地址不刷新 */}
        <Link to="/" style={{ marginRight: '20px' }}>首页</Link>
        <Link to="/about">关于页</Link>
        <hr />

        {/* （3）Switch 组件：匹配到第一个 Route 就停，不浪费性能 */}
        <Switch>
          {/* （4）Route 组件：路径和组件的“匹配规则” */}
          {/* exact 表示精确匹配根路径 /，不然 /about 也会蹭到 / 的匹配 */}
          <Route exact path="/">
            <Home /> {/* 路径匹配，就显示 Home 组件 */}
          </Route>
          {/* 匹配 /about 路径，显示 About 组件 */}
          <Route path="/about">
            <About />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

export default App;

运行这个示例，点击 “首页”“关于页” 链接，就能在不刷新页面的情况下切换组件了。下面咱们拆解每个组件的作用：

（一）Router 组件

它自己不显示东西，主要干两件事：

选路由模式：示例里用
```
BrowserRouter
```
（还起了个别名
```
Router
```
），也能换成
```
HashRouter
```
。
传数据：给下面的
```
Route
```
、
```
Link
```
这些组件传递路由相关的信息，让它们能正常工作。

一般用一个 Router 把整个应用包起来，这样所有后代组件都能用上路由功能。

（二）Link 组件

专门用来做导航链接的。普通的

<a href="/about">

点击会刷新页面，而

Link

的

to

属性指定目标地址，点击后只会改变地址栏的内容，不会刷新页面，正好符合单页应用的需求。

（三）Route 组件

路由的 “核心匹配器”，负责把 “路径” 和 “组件” 绑在一起。关键属性看示例就能懂：

```
path
```
：要匹配的网址路径，比如
```
/
```
对应首页，
```
/about
```
对应关于页。
```
exact
```
：示例里给
```
/
```
加了这个属性，意思是 “必须完全匹配”。如果不加，访问
```
/about
```
时，因为
```
/about
```
包含
```
/
```
，会先匹配到
```
/
```
对应的 Home 组件，就错了。
组件内容：
```
Route
```
标签里包的组件（比如
```
<Home />
```
），就是路径匹配后要显示的内容。