在启用 SSL 的情况下刷新 URL 时出现 React-router 问题答案

【问题标题】：React-router issue when refreshing URLs with SSL Enabled在启用 SSL 的情况下刷新 URL 时出现 React-router 问题
【发布时间】：2018-01-08 09:38:38
【问题描述】：

目前我在使用 react-router 的 BrowserHistory 和 nginx 代理转发请求时遇到问题。我已阅读以下答案：

React-router urls don't work when refreshing or writting manually

我正在寻找的解决方案似乎是一个包罗万象的解决方案，/* 将所有传入请求转发到index.html。

如果 URL 是一层深的，这很好用，即。 /about。但是，如果我在子路由/some/other/url 上尝试刷新页面，页面会完全中断。

这是我当前的 nginx 配置（注意 http -> https 的永久重定向）：

server {
    listen 443 ssl;
    server_name my.domain.io;
    ssl_certificate /etc/letsencrypt/live/my.domain.io/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/my.domain.io/privkey.pem;

    root /usr/share/nginx/html;
    index index.html index.htm;

    location / {
        #try_files $uri $uri/ /index.html;
        try_files $uri $uri/ /index.html$is_args$args;
        #try_files $uri /index.html;
        #try_files $uri $uri/ /index.html?$args;
        auth_basic "Restricted Content";
        auth_basic_user_file /etc/nginx/.htpasswd;
    }

    location ~ /.well-known {
        allow all;
    }
}

server {
    listen 80;
    server_name my.domain.io;
    return 301 https://$host$request_uri;
}

在location / 块中，您会注意到一些其他try_files 语句，我已尝试开始工作，但无济于事。

react-router 逻辑如下所示：

<Route path="/user" component={ConnectedUserPage} />
      <Route path="/user/preview/:locationId" component={ConnectedUserPage} />
      <Route
        path="/user/preview/:locationId/menu"
        component={ConnectedUserPage}
        fullMenuVisible={true}
      />
      <Route
        path="/user/preview/:locationId/menu/:sectionName/:someId"
        component={ConnectedUserPage}
        dishDetailsVisible={true}
      />

      {/* Restaurant Profile */}
      <Route
        path="/location-profile/:profileId"
        component={LocationProfile}
        activeTabIndex={0}
      />
      <Route
        path="/location-profile/:profileId/gallery"
        component={LocationProfile}
        activeTabIndex={0}
      />
      <Route
        path="/location-profile/:profileId/gallery/:imageId"
        component={LocationProfile}
        activeTabIndex={0}
      />
      <Route
        path="/location-profile/:profileId/details"
        component={LocationProfile}
        activeTabIndex={1}
      />
      <Route
        path="/location-profile/:profileId/menu"
        component={LocationProfile}
        activeTabIndex={2}
      />
      <Route
        path="/location-profile/:profileId/comments"
        component={LocationProfile}
        activeTabIndex={3}
      />
      <Route
        path="/location-profile/:profileId/stuff"
        component={LocationProfile}
        activeTabIndex={4}
      />
      <Route
        path="/location-profile/:profileId/menu/:somethingName"
        component={LocationProfile}
        activeTabIndex={2}
      />
      <Route
        path="/location-profile/:profileId/menu/:somethingName/:someItemId"
        component={LocationProfile}
        activeTabIndex={2}
      />
      .
      .
      .
      .

感谢任何帮助或指导。

【问题讨论】：

标签： javascript reactjs ssl nginx react-router

【解决方案1】：

我遇到了和你类似的问题，我的团队花了很多时间研究 nginx 和 react-router，这与你的设置非常相似。

我也遇到了以下错误：

Uncaught SyntaxError: Unexpected token

最后我找到了解决方案，这实际上是在我的 index.html 服务器文件上。

我正在为我的包使用相对路径

<link href="styles.css" rel="stylesheet" />    
<script src="bundle.js"></script>

在路由之后，假设您尝试访问your/path/subdomain，它会尝试获取your/path/subdomain/styles.css 和your/path/subdomain/bundle.js 处的bundle.js 和styles.css 文件，但它们是我项目的根目录.

所以我的解决方案就是使用

<link href="/styles.css" rel="stylesheet" />
<script src="/bundle.js"></script>

这解决了这个问题。希望对您有所帮助。

【讨论】：