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.数据类型

　　}