使用 React router 6

在上一篇介绍使用 React 的文章里，我按照自己的需求以 Webpack 为打包工具，搭建了一个最基础的 React 开发环境。它虽然已经可以让我开始用上 React 的组件功能，但从我实际项目的需求出发，依然还缺少一些实用的辅助扩展。React router 就是其中之一。

我准备使用 React 的项目是一个 OA 系统，涉及到从采购，产品，库存以及销售订单等多方面的业务功能。这些不同的业务功能会有自己不同的访问地址。作为一个前后端完全分离的项目，我需要在前端搞定这些功能界面的访问路径以及对应界面的显示，React router 应该能够帮我解决这个问题。

所以这次我要开始尝试把 React router 集成到我的基础环境中来。另外出于实际应用的需要，我还会尝试研究一下访问不同页面时的「按需加载」功能。因为实际项目中会包含各种不同的业务功能，如果全打包在一个 js 文件中，会给系统访问带来一些瓶颈或影响。所以最好是在访问时再去加载页面需要的 js 文件。

以上是我的需求和考虑，明确了目的，下面开始实操。

注意：本文是基于我上一篇文章中搭建的 React 基础环境来试验 React router 功能的，所以如果你也有兴趣准备尝试一下，请按照我上篇文章的步骤完成 React 基础环境的搭建。链接在此：手动搭建基于 Webpack 的 React 项目开发环境。

使用 React route

第一步：安装 React router。进入项目目录后，依然还是使用 yarn 命令:

yarn add react-router-dom

第二步：使用 React router。编辑 src/main.js 文件，修改为如下代码：

import React from 'react';
import ReactDOM from 'react-dom';
import {HashRouter, Routes, Route, Link} from 'react-router-dom';

// 首页
function ViewHome() {
    return (
        <div>
            <h1>HomePage</h1>
            <p>This is homepage.</p>
        </div>
    );
}

// 关于页面
function ViewAbout() {
    return (
        <div>
            <h1>About</h1>
            <p>This is about page.</p>
        </div>
    );
}

// 页面布局
function AppLayout() {
    return (
        <HashRouter>
            <nav>
                <Link to="/">Home</Link> | <Link to="/about">Abount</Link>
            </nav>
            <Routes>
                <Route path="/" element={<ViewHome />} />
                <Route path="/about" element={<ViewAbout />} />
            </Routes>
        </HashRouter>
    );
}

// 渲染布局组件
ReactDOM.render(<AppLayout />, document.getElementById('app'))

上面的代码简单介绍一下，相比这个文件之前的代码，这次主要的调整如下：

代码第三行引入了 React router 中的一些需要使用的工具组件。比如前端专用的「Hash-bang」地址路由组件 HashRouter，以及定义路由页面的 Routers，Route，还有定义链接跳转的 Link。
创建了两个页面组件。一个是首页页面的组件 ViewHome，一个是关于页面的组件 ViewAbout。
创建了一个布局组件 AppLayout。在这个组件里使用 React router 提供的工具，定义了项目入口页面的导航菜单和相关地址与页面组件的绑定关系。

完成以上两步，React router 就在这个实验小项目中用起来了。执行 yarn start 看看效果：

点击 About 链接后：

完美！而且和点击普通的网页链接不同，这种前端路由的方式没有页面重新加载的过程，所以在交互过程的响应体验上有点类似于使用桌面软件的感觉。

按需加载页面代码

接下来测试我另外一个想法：按需加载。目前代码中的「首页」和「关于页面」是被打包在一起的，我希望可以被打包成两个不同的 js 文件。在我要进入对应页面时，程序再自动加载页面的 js 代码并执行。

这次不需要安装任何扩展库，React 已经提供好了相应的函数和组件功能。在使用这些现成工具前，需要先调整一下代码。首先是不同页面的代码不能放在同一个文件了。那就创建一个专门的目录来存放这类代码：

make src/pages

以上命令在源码目录创建了一个 pages 目录。接下来在这个目录里面分别创建「首页」和「关于页面」的组件代码。首先是「首页」的：

touch src/pages/home.js

这个文件的代码如下：

import React from 'react';

export default () => {
    return (
        <div>
            <h1>HomePage</h1>
            <p>This is homepage.</p>
        </div>
    );
}

然后是「关于页面」的：

touch src/pages/about.js

同样代码如下：

import React from 'react';

export default () => {
    return (
        <div>
            <h1>About page</h1>
            <p>This is about pages.</p>
        </div>
    );
}

基本就是把之前 src/main.js 目录里的两个页面组件代码搬过来了。

接下来就是把 src/main.js 文件的代码调整为如下：

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

const PageHome = lazy(() => import('./pages/home'))
const PageAbout = lazy(() => import('./pages/about'))

function AppLayout() {
    return (
        <HashRouter>
            <nav>
                <Link to="/">Home</Link> | <Link to="/about">Abount</Link>
            </nav>
            <Routes>
                <Route path="/" element={
                        <Suspense fallback={<div>Loading...</div>}>
                            <PageHome />
                        </Suspense>
                    } />
                <Route path="/about" element={
                        <Suspense fallback={<div>Loading...</div>}>
                            <PageAbout />
                        </Suspense>
                    } />
            </Routes>
        </HashRouter>
    );
}

ReactDOM.render(<AppLayout />, document.getElementById('app'))

这次相对于本文件上一次的调整，主要有这些变化：

从 React 库中引入了 Suspense 组件和 lazy 函数，通过他俩的配合来实现按需加载功能。
移除了本文件中两个页面的组件代码，通过 lazy 和 import 来实现加载引入。
对路由的 element 属性做了调整，通过 Suspense 组件包装了一下页面组件。在动态加载页面 js 文件时，如果等待的响应时间较长，Suspense 组件能提供一个比较人性化的 Loading 提示。

来体验一下调整后的效果。这次需要配合浏览器的控制台才能看到效果了。首先是进入首页的效果：

控制台显示加载了两个 js 文件，最下面一个就是首页的。

点击一下「关于页面」的链接 About，效果如下：

随着点击操作，控制台上显示请求了一个新的 js 文件，通过文件名就能看出是关于页面的。

目的达成，离我把 React 应用到实际项目又近了一步。

使用 React router 6

使用 React route

按需加载页面代码

相关文章

上一篇

下一篇