如何为create-react-app + react-router-dom v6设置/v2站点根目录？

1. 配置静态资源公共路径 #

create-react-app支持两种方式指定构建后的资源基础路径，自动给所有静态资源加上/v2前缀，无需手动修改index.html：

• 方式一：添加环境变量
  在项目根目录新建或编辑.env.production文件，写入：

  PUBLIC_URL=/v2
  

• 方式二：修改package.json
  在package.json中添加homepage字段：

  "homepage": "/v2"
  

执行npm run build重新构建后，生成的index.html中JS、CSS等资源路径会自动变为/v2/static/xxx格式。

2. 配置React Router基础路由前缀 #

由于应用部署在/v2子路径，需要给Router添加basename属性，确保路由跳转和页面刷新正常：
修改路由代码如下：

import { createBrowserRouter, RouterProvider } from 'react-router-dom';

const router = createBrowserRouter(routes, {
  basename: '/v2'
});

return (
  <RouterProvider router={router} />
);

这样原路由中的/会对应实际URL的/v2/，所有路由操作都会自动带上/v2前缀。

3. 检查Nginx配置（关键） #

确保Nginx配置能正确处理单页应用的路由刷新，示例配置：

location /v2 {
  root /path/to/your/build/directory;
  try_files $uri $uri/ /v2/index.html;
}

该配置会在/v2路径下的请求找不到对应静态资源时，返回index.html，避免React Router路由刷新出现404。

验证 #

重新构建并部署后，静态资源请求会自动携带/v2前缀，路由跳转和页面刷新均能正常工作，无需手动修改index.html内容。

内容的提问来源于stack exchange，提问作者alilland