啓用SSL刷新URL時出現React-router問題

目前我遇到了使用react-router的BrowserHistory和nginx代理轉發請求的問題。我讀過以下答案：啓用SSL刷新URL時出現React-router問題

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

它似乎我正在尋找的解決方案是一個包羅萬象的，/*所有傳入請求轉發到index.html。

這工作正常，如果URL是一個深度，即。。但是，如果我嘗試刷新頁面，而在子路由中，/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} 
     /> 
     . 
     . 
     . 
     .

任何幫助或指導表示讚賞。

來源

2017-08-01 hammerabi

我有一個類似於你的問題，我的團隊花了很多時間看nginx和react-router，這與你的設置非常相似。

我也有以下錯誤：

Uncaught SyntaxError: Unexpected token < error

最後我找到了解決辦法，全髖關節置換，其實是對我的index.html服務器文件。

我使用相對路徑爲我的包

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

佈線後，假設您嘗試訪問your/path/subdomain，它會嘗試獲得bundle.js和styles.css的文件在your/path/subdomain/styles.css和your/path/subdomain/bundle.js ，但它們是我項目的根源。

所以我的解決辦法是隻使用

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

而這個固定的問題。希望這可以幫助你。

來源

2017-08-03 17:01:53 tkcast

啓用SSL刷新URL時出現React-router問題

回答

相關問題