React Router

写在前面

React Router 是 React 官方在维护的路由库，React Router 是核心库，根据实际需求又划分成了 web 浏览器版本使用 react-router-dom 的和 native 移动版本使用的 react-router-native 两种功能扩展库，因此在使用 React Router 时基本都是在根据项目需求使用对应的功能扩展库了，而不是直接使用 React Router 核心库了。

这里介绍 React Router 在 web 环境中的扩展库 react-router-dom 的使用方法。

在介绍之前，需要搞清楚路由是什么东西，前端路由的概念来源于网络中的路由器，用于将互联网信息转发到正确的位置。前端路由就是用于展示对应的页面信息，比如点击查看首页就要显示首页的信息，点击查看关于就要显示关于的信息。

因此，路由导航链接要一直存在于每一个页面，才能正确地跳转。

在早期的多页面应用时代，实现路由的方式就是在每一个 html 页面的同一个位置放一个路由导航链接，以确保各个页面之间可以切换。

后来单页面应用开始流行起来，单页面路由的实现方式就是只有一个 html 页面，然后通过切换不同的 div 来实现切换不同展示内容的效果。单页面应用的路由只需有一个，一直切换展示区的内容就可以了。

所以对于单页面应用的路由要注意几个点就好上手了：

使用路由的应用页面被划分成为两部分，一部分是常驻的路由导航链接，一部分是跟随路由导航切换内容的内容展示区。
路由可以嵌套，嵌套的路由就是在内容展示区的某块中再次划分成常驻的路由导航链接和更小的内容展示区，此时页面就同时存在第一层路由和第二层路由。

1. 安装

yarn add react-router-dom

//or

npm install react-router-dom

2. Router 和 Route

Router 是路由器的意思，负责整个路由的分发动作，是整个路由的总调度员，是活的。而 Route 是路由的意思，是整个路由调度逻辑，是程序员写好的路由逻辑，是死的。在整个应用运行起来后，Router 调度员会根据程序员提前写好的 Route 路由逻辑来进行路由的调度。

在 React 中，Router 也是一个组件，用于包裹要使用路由的页面组件，这样就可以在组件内使用路由了。因此 React 中的组件是使用 react-router 的入口。

接下来就是在页面组件内部使用路由了，路由的使用分成三部分，1. 路由怎么设置？ 2. 路由入口（路由导航链接）怎么设置？ 3. 路由出口（内容展示区）怎么设置？

React 中没有单独的路由表的定义部分，路由表是和内容展示区仅仅联系在一起的。

在 React 中，<Route> 标签负责路由表中路由逻辑的定义，<Link> 负责路由导航链接的设置，<Switch> 标签负责内容展示区的切换。

function App() {
    return (
        <Router>
            /*页面其余部分*/
            <div style={{background: 'red', height: '20px'}}>我是应用标题</div>  

            /*路由导航链接*/
            <nav>
                <Link to="/">首页</Link>
                <Link to="/about">关于</Link>
                <Link to="/content">内容</Link>
            </nav>    

            /*内容展示部分*/
            <Switch>

                /*路由的设置*/  
                <Route path="/about">
                    <About/>
                </Route>
                <Route path="/content">
                    <Content/>
                </Route>
                <Route path="/">
                    <Home/>
                </Route>

            </Switch>
        </Router>
    );
}