react-router4：解決使用browserRouter模式導致的404問題

雨田666發表於2019-01-17
React模式

前言

眾所周知，react一般會藉助react-router來開發單頁應用（spa）,這樣瀏覽器就不會完全重新整理，對使用者視覺體驗上非常好，這也就是現代web開發的常態，開發一個應用（application），而不是僅僅是頁面（page，古老的web頁面）。

react-router4

2018年，react-router最新的大版本是4，不同於前面的3，2，1，完全基於元件化思想，網上眾說紛紜，褒貶不一，這裡不表。

不變的還是路由的兩種模式： hashRouter 和 browserRouter。

hashRouter會在路由跳轉的url後面加上#/a/b,因為hash值發生變化，瀏覽器並不會向服務端發起請求。

browserRouter則藉助html5裡面history的新的api，可以使用js改變url的值，而不會向服務端發請求。

那我們該選擇哪種模式，網上有的說選browser，有的選hash，這裡暫且不表。我在專案中選擇的browser，不要問我為什麼。

import { BrowserRouter as Router, Switch} from "react-router-dom";
class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <Router>
          <div className="App">
            <Switch>
                // 會做一下登入鑑權判斷
                { RenderRoutes({routes:mainConfig}) }
            </Switch>
          </div>
        </Router>
      </Provider>
    );
  }
}
複製程式碼

問題

開發完成後，npm run build打包生成靜態資源（html、css、js等），放到伺服器給客戶用（因為是前後端分離的專案，前端專案只要放在使用者能訪問到的地方，比如cdn、oss、伺服器都行）。伺服器通常需要啟用web服務，比如nginx、apache，亦或node啟動一個服務，指定靜態資原始檔地址。本次選用ngnx，配置好以後，只要把打包好的靜態資源上傳到伺服器中ningx預設指定靜態資原始檔，就可以訪問了。

但是當我們進去其他路由，如果重新整理瀏覽器，就會報404錯誤，要想重新進入，必須返回路由預設首頁。

react-router4：解決使用browserRouter模式導致的404問題

解決

上面的問題其實是因為，重新整理瀏覽器，相當於瀏覽器向服務端請求/manage/admin/list，但是服務端（或者nginx）並沒有配置這樣一個路由，找不到當然返回404。

那是不是就需要我們配置這樣一個路由，當然不是，因為還有許多其他路由，這樣配置當然不可能；其次，spa應用路由是在前端由react-router配置控制的。

解決辦法就是，把找不到的路由，都返回index.html,這樣重新整理後，利用瀏覽器快取，js會根據路由，控制應該那個頁面顯示。重新整理前後還是同一個頁面。真正的配置，只需要在nginx的配置，比如我使用的預設配置（/etc/nginx/conf.d/default.conf),加上如下

location / {

	   try_files $uri /index.html;

複製程式碼

相關文章