React Router 4 中 BrowserRouter 的 Nginx 配置答案

【问题标题】：Nginx configuration for BrowserRouter in React Router 4React Router 4 中 BrowserRouter 的 Nginx 配置
【发布时间】：2018-06-22 20:19:51
【问题描述】：

我有一个反应路由器，其路由看起来像这样。

const Main = () => {
  return (
    <main>
      <Switch>
        <Route exact path="/" component={FileUploader} />
        <Route path="/user-jobs" component={UserJobs} />
        <Route component={NoMatch} />
      </Switch>
    </main>
  );
};

假设要托管应用的域是 app.in。我希望通过http://app.in/app/v2/uploader 访问我的应用主页。

这是我在 /etc/nginx/sites-enabled/app.conf 中的 nginx 配置

server {
    listen 80;
    underscores_in_headers on;
    server_name app.in;

    root /var/web;
    index index.html index.htm;

    location /app/v2/uploader {
          try_files $uri /app/v2/uploader/index.html;
     }

}

我的应用程序构建文件夹位于 /var/web/app/v2/uploader。当我部署应用程序时，路径（http://app.in/app/v2/uploader、http://app.in/app/v2/uploader/user-jobs）使用NoMatch 组件命中路由，但不是预期的组件。这个问题只有在我使用BrowserRouter时才会出现，HashRouter按预期工作。

由于我对 nginx 比较陌生，任何人都可以指导我如何达到所需的结果吗？

【问题讨论】：

标签： nginx browser-history react-router-v4

【解决方案1】：

我自己想出了答案。我的 nginx 配置一切正常，但问题出在我配置路由器的方式上。预期的位置是/app/v2/uploader，但我在我的路径中寻找/。所以动态地为基本路径添加前缀是这样的。

const urlParts = window.location.pathname.split("/");
const base = urlParts.slice(0, urlParts.length - 1).join("/");

完成此操作后，在路径道具的基础上添加前缀，一切正常。

 <Route path={`${base}/user-jobs`} component={UserJobs} />

【讨论】：