React初识整理（四）--React Router(路由)

官网：https://reacttraining.com/react-router

后端路由：主要做路径和方法的匹配，从而从后台获取相应的数据

前端路由：用于路径和组件的匹配，从而实现组件的切换。 如：`<Route path="/about" component={About}/>`

一、Router分类：

1、< BrowserRouter> 如：http://example.com/about（H5的新特性，不用写#号，具有多样化，使⽤了HTML5的history API来记录你的路由历史），如果刷新页面就会报404

2、 < HashRouter> 如：http://example.com/#/about 兼容老的浏览器，使⽤URL( window.location.hash )的hash部分来记录，可以刷新。

二、环境配置：

　　React Router库包含三个包： react-router , react-router-dom ,和 react-routernative 。

　　react-router 是路由的核⼼包，react-router-dom用于网站开发，eact-routernative 用于移动端应用开发。而且后两者都集成了核心包 react-router ，所有在这里我们导入react-router-dom就好。`npm install --save react-router-dom`

三、建立路由文件

　　①我们在src文件夹下自定义1个文件夹router，用于存放路由文件index.js。我们优先建立了3个模块，分别为登录login、注册register、管理主模块manage，然后将那3个模块导出。之后在index.js里面进行引入、配置。

import React, { Component } from 'react'
import { HashRouter, Route } from "react-router-dom"
import Login from '../login'  //引入login模块
import Register from "../register"  //引入register模块
import Manage from "../manage"  //引入manage模块
//因为解构了Component，所有直接使用，否则就要用React.Component
//export default默认导出
export default class Router extends Component {
    render() {
        return (
        //Router里面只能有1个子元素，所有用div将多个路由包起来
            <HashRouter>
                <div>
                //Route路由，path定义路由接口，component指向模块 
                //exact={true}代表精确查找，如不写，则所有请求都会执行1次path="/"这个
                    <Route path="/" exact={true} component={Login} />
                    <Route path="/login"  component={Login} />
                    <Route path="/register" component={Register} />
                    <Route path="/manage" component={Manage} />
                </div>
            </HashRouter>
        )
    }
}

这里面的Route，是React Router⾥最重要的组件。若当前路径匹配route的路径，它会渲染对应的UI。理想来说， < Route> 应该有⼀个叫 path 的prop，当路径名跟当前路径匹配才会渲染。

　　②然后在src下的主入口文件index.js里配置引入路由：

import React from "react"
import ReactDOM from "react-dom"

import Router from "./router"
ReactDOM.render(<Router />, document.getElementById("root"));

这样，进入localhost:3000/dist时就引入到Router路由里了。

四、实现页面间的跳转（看上去始终保持在1个页面上）

　　在这里我们主要有两种方式：

　　①通过< Link>标签跳转：React带有< Link>标签，相当于我们HTML里的< a>标签，用于做链接跳转用的。我们先在页面最开始导入Link元素： `import {Link} from "react-router-dom"`， 然后就可以在模块任何地方使用了。 如：`<Link to="/register">新用户注册</Link>` 链接跳转（点击后）到注册的路由。这里的to就相当于< a>标签的href属性，指向链接的路由地址。

　　②使用history属性，那么什么是history属性？

　　　　- 每个router组件创建了⼀个history对象，⽤来记录当前路径( history.location ),上⼀步路径也存 储在堆栈中。当前路径改变时，视图会重新渲染，给你⼀种跳转的感觉。

　　　　 - 当前路径⼜是如何改变的呢？ history对象有 history.push() 和 history.replace() 这些⽅法来实现。当你点击 < Link> 组件会触发 history.push() ，使⽤ < Redirect> 则会调⽤ history.replace() 。

　　　　 - 其他⽅法 ， 例如 history.goBack() 和 history.goForward() - ⽤来根据⻚⾯的后退和前进来跳转history堆栈。

　　　　 - 具体使用方法：hhistory主要存在于props属性下，我们可以通过this.props.history.push()这样来调用方法。具体示例：`this.props.history.push("/manage");`这样我们就可以在满足我们条件的情况下，通过这个代码实现跳转到manage的路由下了。没错，push进去的是路由地址，也就是我们要跳转的路由地址。

五、Path和match

　　1、Router的属性path是⽤来标识路由匹配的URL部分，即指向对应component（组件）的路由入口。

　　2、当Router的路由路径和当前页面的路径成功匹配后，会生成1个对象，即match（存在于props中）。match对象包含了以下信息：

　　　　 - match.url .返回URL匹配部分的字符串。对于创建嵌套的 < Link> 很有⽤ - match.path .返回路由路径字符串

　　　　- 就是 < Route path=""> 。将⽤来创建嵌套的 < Route>

　　　　 - match.isExact .返回布尔值，如果准确（没有任何多余字符）匹配则返回true。

　　　　 - match.params .返回⼀个对象包含Path-to-RegExp包从URL解析的键值对。

六、Switch组件

　　当⼀起使⽤多个 < Route> 时，所有匹配的routes都会被渲染。这个时候用Switch就很有用了，因为它只渲染匹配上的第一个组件。如：

<Switch>
    <Route exact path="/" component={login}/>
    <Route path="/register" component={Register}/>
    <Route path="/manage" component={Manage}/>
    <Route path="/:id" render = {()=>(<p>I want this  text to show up for all routes other than '/', '/products' and '/category' </p>)}/>
</Switch>

　　这里，如果不是用Switch来包裹Route，当URL为 /register，所有匹配 /register路径的route都会被渲染。所以，那个path为 ：id 的 < Route> 会跟着 Products 组件⼀块渲染。用Switch来包裹Route就只会渲染匹配的第一项。

七、嵌套路由

前面我们给/Login等创建了路由，那要想要/manage/students这样的两段路由呢？
import React, { Component } from 'react'
import Students from '../students'
import Classes from "../classes"
import Teachers from "../teachers"
import { Link, Route } from "react-router-dom"

export default class Manage extends Component {
    render() {
        let { match } = this.props;
        console.log(match)
        return (
            <div>
                <ul>
                    <li><Link to={match.url + "/students"}>学生管理</Link> </li>
                    <li><Link to={match.url + "/classes"}>班级管理</Link></li>
                    <li><Link to={match.url + "/teachers"}>老师管理</Link></li>
                </ul>
                <div>
                    <Route path={match.path + "/students"} component={Students}></Route>
                    <Route path={match.path + "/classes"} component={Classes}></Route>
                    <Route path={match.path + "/teachers"} component={Teachers}></Route>
                </div>
            </div>
        )
    }
}

这里的路由就是用manage的1段路由 match.path（构建嵌套路由）得到的，与想要配置的2段路由拼接而成，这样的二段路由指向students这样的嵌套组件。 然后用Link元素，用match.url获取目前的地址（构建嵌套链接）与对应的路由拼接，从而进行匹配查找。