目錄

現在我們已經掌握了React路由導航的基本方法，這節學習一下標籤上的屬性和用法。這節還有一個重點就是路由的5種模式。

basename屬性

<Router basename="demo">
        <div>
            <Nav/>
                <Switch>
                    <Route exact path="/" component={Jscomponent} />
                    <Route path="/Jscomponentb"
 
 component={Jscomponentb} />
                    <Route path="/Jscomponentc/:param/:other" component={Jscomponentc} />
                    <Redirect from="/redirect" to="/" />
                    <Route component={Error} />
                </Switch>
        </div>
    </Router
 
>,

設定好後，這時所有的導航路徑都加入了demo層級。但是要注意，此時設定的是全域性增加，如果是單個路由增加你需要特殊個性設定。

forceRefresh屬性

這個屬性的作用是開啟或者關閉React Router，也就是說如果你把forceRefresh的值設定成 true，它將關閉React路由系統，而真實的去伺服器端請求資訊。

現在我們把forceRefresh設定成true，你會發現路由已經不能使用了。

<Router basename="demo" forceRefresh={true}>
        <div>
            <Nav
 
/>
                <Switch>
                    <Route exact path="/" component={Jscomponent} />
                    <Route path="/Jscomponentb" component={Jscomponentb} />
                    <Route path="/Jscomponentc/:param/:other" component={Jscomponentc} />
                    <Redirect from="/redirect" to="/" />
                    <Route component={Error} />
                </Switch>
        </div>
    </Router>,

這個操作經常使用在大型專案，在伺服器跳轉和ReactRouter切換時使用。比如作一個APP活動頁面，第一次請求時我們到伺服器端請求整個頁面，然後請求後，整個頁面DOM進行本地快取，生成React Router實現本地單頁應用。 只要設定我們的forceRefresh就可以了。

5中路由方式

我們一直在使用的路由方式是BrowserRouter，也就是瀏覽器的路由方式，其實React還有幾種路由方式：

1. BrowserRouter：瀏覽器的路由方式，也是我們一直在學習的路由方式，在開發中最常使用。
2. HashRouter：在路徑前加入#號成為一個雜湊值。Hash模式的好處是，再也不會因為我們重新整理而找不到我們的對應路徑了。
3. MemoryRouter：不儲存history，所有路由過程儲存在記憶體裡，不能進行前進後退，因為位址列沒有發生任何變化
4. NativeRouter：經常配合ReactNative使用，多用於移動端。
5. StaticRouter：設定靜態路由，需要和後臺伺服器配合設定，比如設定服務端渲染時使用。

每種模式都有自己的優缺點，根據專案的需求選擇適合專案的就可以。

要想使用HashRouter或者MemoryRouter模式，我們必須先用import引入。

import {BrowserRouter as Router, Route, Switch,Redirect, HashRouter, MemoryRouter } from 'react-router-dom';

HashRouter設定程式碼：

<HashRouter basename="demo">
        <div>
            <Nav/>
                <Switch>
                    <Route exact path="/" component={Jscomponent} />
                    <Route path="/Jscomponentb" component={Jscomponentb} />
                    <Route path="/Jscomponentc/:param/:param1" component={Jscomponentc} />
                    <Redirect from="/redirect" to="/" />
                    <Route component={Error} />
                </Switch>
        </div>
    </HashRouter>,

MemoryRouter設定程式碼：

<MemoryRouter basename="demo">
        <div>
            <Nav/>
                <Switch>
                    <Route exact path="/" component={Jscomponent} />
                    <Route path="/Jscomponentb" component={Jscomponentb} />
                    <Route path="/Jscomponentc/:param/:param1" component={Jscomponentc} />
                    <Redirect from="/redirect" to="/" />
                    <Route component={Error} />
                </Switch>
        </div>
    </MemoryRouter>,

總結：這節課重點是路由的方式，這在專案開始時就應該根據需求選擇好，也是我們應該重點掌握的一個技能。