如何在React项目中创建子目录并绕过React路由由服务器直接服务？

要让/subdirectory路径直接指向子React实例，核心得从服务器配置入手（因为React Router是客户端路由，默认所有请求都会落到父项目的index.html），再配合父项目路由的小调整，具体步骤如下：

一、服务器端配置（关键步骤） #

不同服务器的配置方式不同，以下是常见场景：

Nginx #

修改你的Nginx站点配置，让/subdirectory的请求优先被处理，直接指向子项目的构建目录：

server {
    listen 80;
    server_name myapp.com;

    # 优先处理subdirectory路径的请求
    location /subdirectory {
        alias /实际路径/子项目/build;
        # 子项目自身的路由也需要try_files支持
        try_files $uri $uri/ /subdirectory/index.html;
    }

    # 处理父项目的其他请求
    location / {
        root /实际路径/父项目/build;
        try_files $uri $uri/ /index.html;
    }
}

配置后重启Nginx，/subdirectory开头的请求会直接走子项目的静态文件，不会进入父项目的路由逻辑。

Apache #

在父项目的根目录（或服务器配置文件）中添加重写规则，先拦截/subdirectory的请求：

RewriteEngine On

# 先把subdirectory的请求转发到子项目构建目录
RewriteRule ^subdirectory/(.*)$ /实际路径/子项目/build/$1 [L]

# 父项目的React Router默认规则
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

确保Apache的mod_rewrite模块已经启用，然后重启服务。

开发环境（Create React App） #

如果是本地开发，想在同一域名下模拟这个场景，可以用代理：

1. 子项目启动在另一个端口（比如3001）
2. 父项目安装http-proxy-middleware：npm install http-proxy-middleware --save-dev
3. 在父项目src目录下创建setupProxy.js：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/subdirectory',
    createProxyMiddleware({
      target: 'http://localhost:3001',
      pathRewrite: { '^/subdirectory': '' },
      changeOrigin: true,
    })
  );
};

这样访问http://localhost:3000/subdirectory就会代理到运行在3001端口的子项目。

二、父项目React Router的补充调整 #

虽然服务器配置已经解决了核心问题，但可以在父项目路由里加个规则，避免客户端路由误匹配：

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

function App() {
  return (
    <Routes>
      <Route path="/home" element={<Home />} />
      <Route path="/projects" element={<Projects />} />
      {/* 匹配/subdirectory开头的路径，直接跳转（避免父路由触发404） */}
      <Route path="/subdirectory/*" element={<Navigate to="/subdirectory" replace />} />
      {/* 404页面放在最后 */}
      <Route path="*" element={<NotFoundPage />} />
    </Routes>
  );
}

额外注意事项 #

• 子项目的package.json里要设置"homepage": "/subdirectory"，这样子项目的静态资源路径会自动加上/subdirectory前缀，避免资源加载失败。
• 父项目的homepage保持为"/"即可。

内容的提问来源于stack exchange，提问作者I'm nidhin