HashRouter包裹下訪問根服務：假設為 localhost:3000/
1 import { HashRouter as Router, Route, Redirect } from 'react-router-dom';
2 // as的作用為將HashRouter重命名為Router,這樣的好處是在反復測試HashRouter和BrowserRouter時,可以免去組件修改
3
4 import Home from './pages/Home/index';
5 import Hooks from './pages/Hooks/index';
6
7 export default function App() {
8 return (
9 <Router>
10 <Route path="/">
11 <Redirect to="/home" />
12 </Route>
13 <Route path="/home" component={Home} />
14 <Route path="/hooks" component={Hooks} />
15 </Router>
16 )
17 }
操作一: 瀏覽器直接輸入localhost:3000/
結果: 路由自動變為localhost:3000/#/home,可正常訪問.
操作二: 瀏覽器直接輸入localhost:3000/#/hooks
結果: 可正常訪問
將HashRouter更改為BrowserRouter
1 import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom'; // 使用BrowserRouter
操作一: 瀏覽器直接輸入localhost:3000/
結果: 路由自動變為localhost:3000/home,可正常訪問
操作二: 瀏覽器直接輸入localhost:3000/hooks
結果: 瀏覽器無法獲得正確的結果,Cannot GET /hooks
操作二: 瀏覽器直接輸入localhost:3000/home
結果: 瀏覽器無法獲得正確的結果,Cannot GET /home
操作三: 瀏覽器直接輸入localhost:3000/成功后,點擊內容<Link to="home">Home</Link>
結果: 可成功跳轉
那么問題來了：為什么HashRouter可以直接訪問路徑,而BrowserRouter會出現找不到路由的情況？為什么HashRouter在前端跳轉就能成功?
服務器路由: browserRouter, 前端路由: hashRouter
browserRouter
如果前端使用了browserRouter,每次改變路由時，會向服務器發送請求，因為服務器未配置對應的路徑指向對應的文件，自然導致出現404的情況.(對於初始化頁面,即路由為/時,不會發送請求)
因此在使用browserHistory需要再加一層服務器配置(node/nginx),讓前端發送的請求映射到對應的html文件上.
hashRouter
由於hashRouter會在路徑上添加/#/，而/#/后面的所有都不會發送到服務器端，即對於服務器而言，路徑依舊是localhost:3000，路由切換在前端完成。
但是官方會更推薦使用browserRouter，貌似是因為其構建於H5的History API，比起hashRouter，它多出了更多的方法操控url
Link
現在，我們應用需要在各個頁面間切換，如果使用錨點元素實現，在每次點擊時，頁面被重新加載，React Router提供了<Link>組件用來避免這種狀況發生。當 你點擊<Link>時，url會更新，組件會被重新渲染，但是頁面不會重新加載
嗯、先看個例子
1 <Link to="/about">關於</Link>
2
3 // to為obj
4 <Link to={{
5 pathname: '/courses',
6 search: '?sort=name',
7 hash: '#the-hash',
8 state: { fromDashboard: true }
9 }}/>
10
11 // replace
12
13 <Link to="/courses" replace />
<Link>使用to參數來描述需要定位的頁面。它的值既可是字符串，也可以是location對象（包含pathname、search、hash、與state屬性）如果其值為字符串，將會被轉換為location對象
replace(bool)：為 true 時，點擊鏈接后將使用新地址替換掉訪問歷史記錄里面的原地址；為 false 時，點擊鏈接后將在原有訪問歷史記錄的基礎上添加一個新的紀錄。默認為 false；
點擊Link后，路由系統發生了什么？
Link 組件最終會渲染為 HTML 標簽 <a>，它的 to、query、hash 屬性會被組合在一起並渲染為 href 屬性。雖然 Link 被渲染為超鏈接，但在內部實現上使用腳本攔截了瀏覽器的默認行為，然后調用了history.pushState 方法（注意，文中出現的 history 指的是通過 history 包里面的 create*History 方法創建的對象，window.history 則指定瀏覽器原生的 history 對象，由於有些 API 相同，不要弄混）。history 包中底層的 pushState 方法支持傳入兩個參數 state 和 path，在函數體內有將這兩個參數傳輸到 createLocation 方法中，返回 location 的結構如下：
1 location = {
2 pathname, // 當前路徑，即 Link 中的 to 屬性
3 search, // search
4 hash, // hash
5 state, // state 對象
6 action, // location 類型，在點擊 Link 時為 PUSH，瀏覽器前進后退時為 POP，調用 replaceState 方法時為 REPLACE
7 key, // 用於操作 sessionStorage 存取 state 對象
8 };
系統會將上述 location 對象作為參數傳入到 TransitionTo 方法中，然后調用 window.location.hash 或者window.history.pushState() 修改了應用的 URL，這取決於你創建 history 對象的方式。同時會觸發history.listen 中注冊的事件監聽器。
NavLink
<NavLink>是<Link>的一個特定版本，會在匹配上當前的url的時候給已經渲染的元素添加參數，組件的屬性有
activeClassName(string)：設置選中樣式，默認值為active
activeStyle(object)：當元素被選中時，為此元素添加樣式
exact(bool)：為true時，只有當導致和完全匹配class和style才會應用
strict(bool)：為true時，在確定為位置是否與當前URL匹配時，將考慮位置pathname后的斜線
isActive(func)判斷鏈接是否激活的額外邏輯的功能
嗯、看例子就懂了
1 // activeClassName選中時樣式為selected
2 <NavLink
3 to="/faq"
4 activeClassName="selected"
5 >FAQs</NavLink>
6
7 // 選中時樣式為activeStyle的樣式設置
8 <NavLink
9 to="/faq"
10 activeStyle={{
11 fontWeight: 'bold',
12 color: 'red'
13 }}
14 >FAQs</NavLink>
15
16 // 當event id為奇數的時候，激活鏈接
17 const oddEvent = (match, location) => {
18 if (!match) {
19 return false
20 }
21 const eventID = parseInt(match.params.eventID)
22 return !isNaN(eventID) && eventID % 2 === 1
23 }
24
25 <NavLink
26 to="/events/123"
27 isActive={oddEvent}
28 >Event 123</NavLink>