前言
最近因項目需要開始使用react，很快遇到一個問題，首頁的導航需要用到react-router，
但網上鋪天蓋地都是路由4.0的使用博文，而我的路由版本是最新的5.0，這讓我很是苦惱。
最后幾經波折，終於試出了路由5的用法，總結如下，希望幫到有需要的小伙伴
安裝（新版指路由5，舊版指路由4）
新版：npm install react-router-dom --save-dev
舊版：npm install react-router --save-dev
注：新版直接安裝react-router-dom即可，其中已經包含了react-router的核心API，更小巧靈活
index.js文件引入
新版
import { BrowserRouter as Router, Switch, Route } from "react-router-dom
舊版
import { Router, Route, Link } from 'react-router'
接着引入你的組件
然后index.js中如下截圖添加路由即可
新版
嵌套關系：<Router> / <Switch> / <Route>
Router：保持 UI 和 URL 的同步
Switch：保證只渲染其中一個子路由
Route：用於聲明路由映射到應用程序的組件層
exact：幫助我們精確定位，正確顯示跳轉后對應組件內容，不加該屬性會出現僅URL改變，但頁面內容並未隨之改變
舊版
<Route>不需要嵌套在<Switch>中，連接組件的方式為 Component = { 你的組件名 }
然后在Nav.js導航組件中引入路由的Link組件
import { Link } from 'react-router-dom';
接着用<Link to="組件地址"></Link> ，<Link>最終會被解析成a標簽，屬性to會被解析成href 屬性
這里組件路由地址和index.js中設置的路由地址保持一致
你可能會遇到的2個報錯
1：該錯說明你沒有用新版的方式引用路由
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
2：該錯提示解析錯誤：預期對應的JSX結束標記，可能是你的標簽沒有閉合，也可能是你的<Route>標簽多寫了一個 /
