在启用SSL的情况下刷新URL时的React-router问题 [英] React-router issue when refreshing URLs with SSL Enabled

问题描述

当前，我在使用带有Nginx代理的react-router的BrowserHistory来转发请求时遇到问题.我已阅读以下答案:

在以下情况下，react-router url不起作用手动刷新或手写

看来，我正在寻找的解决方案是一个包罗万象的/*，它将所有传入的请求转发到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}
      />
      .
      .
      .
      .

任何帮助或指导表示赞赏.

解决方案

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

我也遇到以下错误:

未捕获到的SyntaxError:意外令牌<错误

最后，我找到了一个解决方案，实际上是在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>

这解决了该问题.希望对您有帮助.

Currently I'm experiencing problems using react-router's BrowserHistory with an nginx proxy to forward requests. I've read the following answer:

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

And it seems that the solution I'm looking for is a catch-all, /* to forward all of the incoming requests to index.html.

This works fine if the URL is one level deep, ie. /about. However, if I try to refresh the page while on a child-route, /some/other/url, the page completely breaks.

Here's my current nginx configuration (notice the permanent redirect for 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;
}

In the location / block, you'll notice some other try_files statements that I've tried to get to work, but to no avail.

Here's what the react-router logic looks like:

<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}
      />
      .
      .
      .
      .

Any help or guidance is appreciated.

解决方案

I had a similar issue like yours and my team spent a lot of time looking at nginx and react-router, which was quite similar to your setup.

I also had the following error:

Uncaught SyntaxError: Unexpected token < error

In the end I found a solution, thas was in fact on my index.html server file.

I was using relative paths for my bundle

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

And after routing, let's say you try to access your/path/subdomain, it would try to get the bundle.js and the styles.css files at your/path/subdomain/styles.css and your/path/subdomain/bundle.js, but they were at the root of my project.

So my solution was just to use

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

And this fixed the issue. Hope this helps you.

这篇关于在启用SSL的情况下刷新URL时的React-router问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！