Nginx部署多React项目路由配置异常问题求助

一、修正Nginx配置 #

你的Nginx配置问题在于try_files里的/index.html指向了服务器根目录的默认页面，而非对应site1/site2文件夹下的index.html。同时需要确保访问子路径时能自动指向对应项目的入口文件，修改后的配置如下：

location /site1/ {
    root /var/www/html;
    try_files $uri $uri/ /site1/index.html;
}

location /site2/ {
    root /var/www/html;
    try_files $uri $uri/ /site2/index.html;
}

或者也可以用alias配置，效果一致：

location /site1/ {
    alias /var/www/html/site1/;
    try_files $uri $uri/ /site1/index.html;
}

location /site2/ {
    alias /var/www/html/site2/;
    try_files $uri $uri/ /site2/index.html;
}

• try_files $uri $uri/ /site1/index.html会先尝试访问请求的文件/路径，不存在的话就重定向到对应项目的index.html，保证React路由能接管请求
• $uri/用于让访问/site1/时自动加载index.html，无需用户手动输入

二、配置React路由的basename #

每个React项目需要设置路由的basename，让路由识别当前项目的根路径是/site1或/site2，修改路由配置：

site1项目路由配置： #

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

function App() {
  return (
    <BrowserRouter basename="/site1">
      <Routes>
        <Route path='*' element={<Home />} />
        <Route path='/home' element={<Home />} />
      </Routes>
    </BrowserRouter>
  );
}

site2项目路由配置： #

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

function App() {
  return (
    <BrowserRouter basename="/site2">
      <Routes>
        <Route path='*' element={<Home />} />
        <Route path='/home' element={<Home />} />
      </Routes>
    </BrowserRouter>
  );
}

三、重新构建并部署项目 #

修改完路由配置后，重新构建两个React项目，将生成的build文件夹分别重命名为site1和site2，放到/var/www/html目录下。

四、验证效果 #

1. 重启Nginx服务：sudo systemctl restart nginx
2. 访问http://255.255.255.255/site1/，会自动加载site1的页面，路由将跳转到/site1/home
3. 访问http://255.255.255.255/site1/anything，也会自动跳转到/site1/home

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