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獲取目前的地址（構建嵌套連接）與對應的路由拼接，從而進行匹配查找。