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

前言

衆所周知，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的值，而不會向服務端發請求。(重點：這個api不會發請求，只是改變了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錯誤，要想從新進入，必須返回路由默認首頁。

解決

上面的問題實際上是由於，刷新瀏覽器，至關於瀏覽器向服務端請求/manage/admin/list，可是服務端（或者nginx）並無配置這樣一個路由，找不到固然返回404。

那是否是就須要咱們配置這樣一個路由，固然不是，由於還有許多其餘路由，這樣配置固然不可能；其次，spa應用路由是在前端由react-router配置控制的。

解決辦法就是，把找不到的路由，都返回index.html,這樣刷新後，利用瀏覽器緩存，js會根據路由，控制應該那個頁面顯示。刷新先後仍是同一個頁面。真正的配置，只須要在nginx的配置，好比我使用的默認配置（/etc/nginx/conf.d/default.conf),加上以下

location / {

	   try_files $uri /index.html;

複製代碼