React 项目路径添加指定的访问前缀 – SPA

前言

之前我们讨论了怎么在 Angular 项目路径添加指定的访问前缀，该项目针对 SPA 应用；当然，我们也讨论了 Next 项目路径添加指定的访问前缀，该项目是使用 React 框架完成的 MPA 应用。本文，我们讨论 React 的 SPA 应用，怎么为该应用添加指定的访问前缀呢？

项目开发准备

这里我们使用了 creat-react-app 进行创建。

react 版本 ^18.2.0

我们将使用到其默认的命令行进行项目打包：

"build": "react-scripts build"

但是，我们更改下，打包到自定义的文件夹，名为 jimmy：

"build": "react-scripts build && mv build jimmy"

这种打包的方法，能够方便笔者运行多个命令行输出不同的项目，而不是单一更改配置。读者也可以尝试下更改其配置信息输出打包文件

通过运行 npm run build 命令行，我们就会得到 jimmy 文件夹。嗯～ 有点超前，打包输出文件这步应该在部署项目之前打包！好了，我们先对项目进行更改～

更改项目开发前缀

项目中，我们使用的是 history 模式，所以，项目的路由方式如下：

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

function App() {
  return (
    <>
      <Router>
        <Routes>
          {/* 重定向 */}
          <Route path="/" element={<Navigate replace to="/admin" />} />
          <Route path='admin' element={<Home/>}/>
          {/* 页面找不到 */}
          <Route path="*" element={<NotFound/>}/>
        </Routes>
      </Router>
    </>
  );
}

export default App;

BrowserRouter 指的就是 history 模式。我们想项目在 /jimmy/ 的前缀内打开，我们需要对 Router 标签添加 basename 属性，如下：

<Router basename="/jimmy">
  // other code
</Router>

此时本地运行项目，可以看到效果如下：

留意 localhost:3000/jimmy/admin 链接。

题外话，页面效果中的代码如下：

import logo from '../logo.svg';
import { Button } from 'react-vant';
import HelloWorld from '../../../components/HelloWorld'

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

function Home() {
  return (
    <div className="Home">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <Link to="/admin/login">登陆</Link>
        <HelloWorld />
        <Button type="danger">删除</Button>
      </header>
    </div>
  );
}

export default Home;

我们引入了 react vant，并且抽出了自定义的 HelloWorld 组件。

更改项目构建前缀

构建项目，我们对前缀的添加有如下的方法：

1. 添加 homepage

在项目的 package.json 文件中添加 homepage 字段，这里我们应该设置其值为 /jimmy/:

{
  "homepage": "/jimmy/"
}

2. 直接更改 script 命令行

如果你是在同个仓库里面，同份 package.json 维护多个应用，建议你在 package.json 的 scripts 中更改，如下：

{
  "scripts": {
    "build": "PUBLIC_URL=/jimmy/ react-scripts build && mv build jimmy"
  }
}

部署项目

运行 npm run build 打包后，我们会得到 jimmy 文件夹。我们将其上传到服务器上，并配置 nginx 的信息：

# react project - spa
location /jimmy/ {
  index index.html index.htm;
  try_files $uri $uri/ /jimmy/index.html;
}

进入线上项目，我们会看到如下效果：

刷新页面，页面也可以正常展示；如果 history 模式没有配置好，会出现刷新页面，内容丢失的情况

Thanks for reading.

本文正在参加「金石计划」