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

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

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

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

1、Router分类：

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

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

2、环境配置：

　　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`

3、创建路由文件

　　①咱们在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路由里了。

4、实现页面间的跳转（看上去始终保持在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进去的是路由地址，也就是咱们要跳转的路由地址。

5、Path和match

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

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

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

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

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

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

6、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就只会渲染匹配的第一项。

7、嵌套路由

前面咱们给/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获取目前的地址（构建嵌套连接）与对应的路由拼接，从而进行匹配查找。