第 09 节、路由：Router 中的属性和路由模式

目录

现在我们已经掌握了React路由导航的基本方法，这节学习一下标签上的属性和用法。这节还有一个重点就是路由的5种模式。

basename属性

basename的作用是我们增加一级导航目录，比如以前的导航目录是：http://localhost:1717/Jscomponentb 现在想访问同一个页面，但是路径变成http://localhost:1717/demo/Jscomponentb。这时候就可以使用basename属性来设置。basename属性是放在标签里边的。
index.js

<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>,

总结：这节课重点是路由的方式，这在项目开始时就应该根据需求选择好，也是我们应该重点掌握的一个技能。