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

官網：https://reacttraining.com/react-router 後端路由：主要做路徑和方法的匹配，從而從後臺獲取相應的數據前端路由：用於路徑和組件的匹配，從而實現組件的切換。如：`<Route path="/about" component={About}/>` 一、Rout ...

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