3. React-router history / 路由 (課件2019-1-19/21）

http://localhost

http://localhost/static/index.html

/ -> index.html

http://localhost/index.html

 

之前後臺接收到前端的請求，不但要發送數據給前端還要返回頁面

前端路由，切換頁面不須要服務器返回，減小了服務器壓力、單頁應用

公共資源只須要請求一次便可，前端的職責就更多，前端比重就較高（邏輯多了）

安裝路由：

　　npm i react-router-dom

https://reacttraining.com/react-router/

 

history路由（瀏覽器歷史記錄管理）在服務器下訪問

　　添加瀏覽器歷史記錄的

　　history.pushState(數據,'瀏覽器都忽略的名字',你顯示的url地址)

　　onpopstate

　　　　當你觸發了瀏覽器的前進或者後退就會觸發這個事件

　　　　在這個事件中，ev下有state屬性，能夠接收到pushState時的數據

　　history.length 查看歷史記錄中的個數（聽說最高是50個）

　　back() 回退

　　forward() 前進

　　go()

---

BrowserRouter : (瀏覽器路由)

1.import {BrowserRouter as Router} from 'react-router-dom';    

　　hash路由：import {HashRouter as Router} from 'react-router-dom';  // 會有#號

 

2.引入把Router包在ReactDOM.render(根下);

好比:

ReactDOM.render(<Router><App /></Router>);

3.配置路由：

　　import {Route} from 'react-router-dom';

　　<Route path="/home" component={組件}/>

（1）component={組件}也能夠是一個函數（ 函數聲明組件）

　　<Route path="/home" component={(props)=>{

　　　　return <div>1234</div>

　　　　// return <Ppa/>

　　}}/>

　　props:

　　　　在切換路由的時候記錄的細節信息。

　　　　是函數的狀況下，要傳入路由細節。

　　　　在組件中，能夠經過 this.props 去查看、使用：

　　　　match　　->　　params、url、path           （params 動態路由 :id）

　　　　location　　->　　hash、search、state　　（hash #號後面  /  search ?號後面）

　　　　history　　->　　go() 、push()、 replace()

　　通常使用component的函數，都是使用函數聲明組件。

注意:

　　component若是放函數，必定要放有名的函數組件，

　　否則（匿名函數）點擊屢次本路由，會屢次掛載和卸載

 

通常判斷使用可選組件，使用render={(props)=>{}}

（2）render能夠返回jsx或者一個組件，更喜歡經過render去判斷使用需求的組件。

（3）children跟一個函數，無論你匹不匹配path都執行組件。

 

---

 

特性:

　　默認配置若是/下有組件，那麼全部關於/xxx都吃獲得/下的這個組件

若是，/下匹配組件，/下的xxx不想匹配/這個組件，那麼能夠在Route 下

加一個 exact 意思，只有/才能匹配到/下的組件。

<Route path="/one" /> /one/two 能顯示one

<Route path="/one" exact/> /one/two 只能顯示/two不能顯示/one

 

/one    /one/two    true    no

/one    /one/two    false   yes

 

strict

　　嚴格匹配

　　在path爲/detail/ 沒有加strict那麼 url爲/detail可以匹配

　　加了strict的時候，能匹配

　　　　1./detail/

　　　　2./detail/xxx

　　能夠2個一塊兒用

---

Link （跳轉）　　

　　<Link to="/路徑">到路徑</Link>

　　　　1. import { Link } from 'react-router-dom';

　　　　2. <Link to="/">首頁</Link>

import React, { Component } from 'react';
import { Link } from 'react-router-dom';

class About extends Component {
  render() {
    console.log(this.props)
    return (
      <div>
        About
        <Link to={{
          pathname:'/about/a' ,
          search:'?num=0'
        }}><button>A</button></Link>
        <Link to={{
          pathname:'/about/b',
          search:'?num=1'
        }} ><button>B</button></Link>
        <Link to="/about/d"><button>D模板</button></Link>
      </div>
    );
  }
}

export default About;

demo

 

Redirect (重定向)

　　1.引包： import { Redirect } from 'react-router-dom';

　　2. <Redirect to="/dashboard"/>   等同於調用了replace(),替換了當前的url

　　to後面能夠跟字符串（路徑便可），

　　還能夠跟對象（to={{pathname:'/',search:'?a=1&b=2'}}）

　　存放數據

 

Switch：從上到下去讀，只匹配一個

　　當路由既有動態路由，又有靜態路由

　　　　/about/:id  動態

　　　　/about/d　靜態

　　輸入靜態路由的時候，會匹配到動態路由（2個組件都會顯示）　　

　　要求是：輸入靜態路由只顯示靜態。這個時候就要用 Switch

　　

　　1.引包：import { Switch } from 'react-touter-dom'

 

　　2.組件：

　　　　<Switch>

　　　　　　/about/d

　　　　　　/about/:id

　　　　</Switch>

import React, { Component } from 'react';
import { Route,Link,Switch } from 'react-router-dom';
import Home from './component/home';
import About from './component/about';
import Aboutc from './component/aboutc';
import Aboutd from './component/aboutd';

class App extends Component {
 
  render() {
    return (
      <div>
        <Link to='/'><button>首頁</button></Link>
        <Link to='/about'><button>關於</button></Link>
        <Route exact path='/' component={Home}/>
        <Route path='/about' render={(props)=>{
          return <About {...props}/>
        }}/>
        <Switch>
        <Route path='/about/d' component={Aboutd}/>
        <Route path='/about/:id' component={Aboutc}/>
        </Switch>
      </div>
    );
  }
}

export default App;

demo

 

 （當組件拿不到 props 的時候，可使用 withRouter 去包一下）

withRouter：

　　高階組件：源於高階函數（參數爲函數，返回一個新的函數（或者一類運算結果））

　　　　function fn(f){

　　　　　　return f.bind(document)

　　　　}

　　高階組件：傳一個組件，返回另一個組件

　　1.引包：import { withRouter } from 'react-router-dom'

　　2.導出： export default withRouter(BackHome)     

import React, { Component } from 'react';
import {withRouter} from 'react-router-dom';
class BackHome extends Component {

    back = () => {
        this.props.history.push('/');
    }
    render() { 
        return (
            <div>
               <button onClick={this.back}>返回首頁</button>
            </div>
        );
    }
}
export default withRouter(BackHome);

demo

 

---

PropTypes： 可以驗證父級傳遞進來的數據類型（爲了報錯）

　　 import PropTypes from 'prop-types';

　　PPa.propTypes = {

　　　　num: PropTypes.array

　　　　//num:PropTypes.number

　　　　//num:PropTypes.數據類型

　　}