路由配置流程：

具體操作流程

      1 開啟計算機命令列工具，輸入命令“npm install react-router --save-dev”安裝路由包，如果出現下圖所示資訊，則說明安裝失敗：

解決方法：

      出現此問題的原因主要是我沒有定位到專案資料夾導致。通過定位到專案資料夾安裝路由模組可解決上述問題。

但是，在安裝過程中可能還會報錯，或者安裝好了，但是如果你之前安裝了antd模組，他會將你antd目錄下的檔案刪除，導致你的專案無法執行。比如我就出現此問題。

這是因為我之前已經安裝了antd模組，此模組是使用yarn來安裝的，通過查詢資料發現它和npm安裝方式衝突。所以當我們在專案資料夾中如果先安裝antd模組，後安裝路由模組時很可能會導致整個專案癱瘓。

解決方法：

      既然安裝路由模組後它將antd內的內容刪除了，那我們在安裝好路由模組後再安裝一次antd模組，這是即可解決上述問題。當然這是緊急救場做法，更為穩妥的方法我還在繼續尋找中。

      2 在專案檔案中引用：

      3.1 在左側選單欄程式碼和右側面板程式碼中通過<Link>標籤和<Route>來實現兩標籤的連線，如下：

      左側選單欄程式碼：

      右側面板程式碼：

      3.2 在此js資料夾頂部分別引入配置了路由的各個元件，如下：

      專案對應的目錄樹：

      上面的選單欄程式碼、面板程式碼其實都是在Navi.js檔案中寫的，此檔案就是根元件檔案，它裡面有整個系統主介面的佈局程式碼，它通過配置路由分別呼叫home、resources、news、……一系列元件來完整整個系統介面的搭建和切換。

      在此處最主要的一點就是這個home元件，它的路由配置就是“/”，沒有明確寫在程式碼中的路徑，這樣的話它在頁面初始化的時候會載入，當我們點選“首頁”選單的時候它也會載入切換。

      3.3 各個元件的大致寫法類似於下圖所示：

      4 最後的效果如下圖所示：