我正在努力解决同样的问题。最后，我能够使用官方文档和答案组合解决它：

假设：

• 您的 React 应用程序基于create-react-app包（您正在使用react-router-dom）。
• 您正在使用 Nginx，并且根路径正被另一个服务（甚至是另一个 React/Gatsby 应用程序，这是我的情况）使用。
• 您希望在子目录中部署 React App，并能够从该子目录提供 React App 的所有静态数据。

react应用程序更改：

基于官方文档。

1. 更新您BrowserRouter的加入basename。例子：<BrowserRouter history={history} basename="/webapp">。
2. 指定homepage你的package.json。例子："homepage": "/webapp"。
3. 如果您通过相对路径引用静态文件，则应将子目录添加到该引用中。例子：src="/static/logo/logo.png"变成src="/webapp/static/logo/logo.png".

Nginx 变化：

location ^~ /webapp {
   alias /var/www/myapp/build;
   try_files $uri $uri/ /webapp/index.html;
}

下面是一个 nginx 位置配置的例子：

location ^~ /analytics  {
    alias /var/www/myapp/build;

    subs_filter href="/ href="http://foo.example.com/analytics;
    subs_filter src="/ src="http://foo.example.com/analytics;
}

• 该location设置为^~ /analytics，意味着在位置括号创建的规则将成为有效的，当有人访问http://foo.example.com/analytics
• 该alias设置创建react的-App网站的静态生成文件夹/var/www/myapp/build。当访问者点击您的子目录 url foo.example.com/analytics 时，将提供该服务
• 接下来，这两subs_filter行用新的完整 URL替换以React 应用程序的主目录开头的任何对href和srcurl 的引用/。这将确保 NGINX 正确定位和提供所有 CSS 和 JS 文件。

最后一点，在 Create-React-App 的情况下，createBrowserHistory您的react-router中的任何引用都需要替换为createHashHistory，因为浏览器历史记录不适用于上述 NGINX 配置。

我的网站名为 derekdawsonspersonalwebsite.com，我想提供我在 derekdawsonspersonalwebsite.com/metronome/ 上制作的 React 应用程序

我通过执行以下操作得到了这个工作：

1. 添加"homepage": "/metronome",到package.json文件中
2. 如果您使用的是react-router<BrowserRouter basename="/your_subdirectory">，请在我的情况下添加：

<BrowserRouter basename="/metronome">
    <div>
        <nav>
            <Link to="/"></Link>
        </nav>
        <Switch>
            <Route exact path="/" component={Metronome} />
        </Switch>
    </div>
</BrowserRouter>

3. yarn run build
4. 我将构建目录的内容上传到我服务器上的这个位置 /var/www/personalwebsite.com/metronome
5. 这是我的服务器块的/etc/nginx/sites-available/personalwebsite.com样子

server {
    listen 443 ssl;

    server_name derekdawsonspersonalwebsite.com www.derekdawsonspersonalwebsite.com;
    ssl_certificate /home/derek/ssl/derekdawsonspersonalwebsite.com_chain.crt;
    ssl_certificate_key /home/derek/ssl/derekdawsonspersonalwebsite.com_tld.key;

    location / {
        root /var/www/personalwebsite.com;
        index index.html;
    }

    location /metronome {
        root /var/www/personalwebsite.com;
        index index.html;
    }
}

server {
    listen 80 default_server;
    server_name derekdawsonspersonalwebsite.com www.derekdawsonspersonalwebsite.com;
    return 301 https://$host$request_uri;
}