SSLを有効にしてURLをリフレッシュすると反応ルータの問題が発生する

Question

現在、反応ルータのBrowserHistoryとnginxプロキシを使用してリクエストを転送する際に問題が発生しています。私は、次のような答えを読んだ：

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

そして、私が探しているソリューションは、/*はindex.htmlに着信要求のすべてを転送するために、キャッチオールであると思われます。

URLが1レベル深い場合は正常に動作します。​​。ただし、子ルートのときにページを更新しようとすると、/some/other/urlページが完全に破損します。ここで

が私の現在のnginxの設定です（HTTPの永続的なリダイレクトに気づく - > HTTPS）：location /ブロックで

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; 
} 

、あなたは私が仕事に行くために試したいくつかの他のtry_files文に気付くでしょうしかし、役に立たない。すべてのヘルプや案内が高く評価され

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

：ここ

はreact-routerロジックは次のようになります。

Answer 1

私はあなたのような同様の問題を抱えていました。私のチームは、あなたのセットアップに非常に似ていたnginxと反応ルータを見るのに多くの時間を費やしました。 thasは私のindex.htmlサーバファイル上で実際にあった、私は解決策を見つけた最後に

Uncaught SyntaxError: Unexpected token < error

：

は、私はまた、次のエラーが発生しました。私は

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

とルーティング後

、それは your/path/subdomain/styles.cssと your/path/subdomain/bundle.jsでbundle.jsとStyles.cssをファイルを取得しようと、あなたは your/path/subdomainにアクセスしてみましょう私のバンドルの相対パスを使用していた

しかし、彼らは私のプロジェクトの根源でした。

だから私のソリューションは、ちょうど

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

を使用していたそして、これは問題を修正しました。これがあなたを助けることを願っています