React 项目路径添加指定的访问前缀 - SPA
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.
腾讯云开发者
