3.React-router/BrowserRouter/withRouter/Switch/history/exact/strict/Link/Redirect/PropTypes

先了解下基础知识

路径可能的样子： http://localhost:9000/static/index/posts/edit?name=张三&age=12&gender=man#zh/en/年龄

一段完整的地址： 协议           端口                  路径（/...）                  search（?key=value&k=v&...）      hash（#...）

 

以前后台接收到前端的请求，不但要发送数据给前端还要返回页面

前端路由，切换页面不需要服务器返回，减少了服务器压力、单页应用

公共资源只需要请求一次即可，前端的职责就更多，前端比重就较高（逻辑多了）

安装路由：

　　npm i react-router-dom

history 路由：（浏览器历史记录管理）

　　在服务器下访问，添加浏览器历史记录的

　　history.pushState (数据,'浏览器都忽略的名字',你显示的 url 地址)

　　onpopstate

　　　　当你触发了浏览器的前进或者后退就会触发这个事件

　　　　在这个事件中，ev 下有 state 属性，可以接收到 pushState 时的数据

　　history.length 查看历史记录中的个数（据说最高是50个）

　　back() （回退）

　　forward() （前进）

　　go() （ go(-3) 后退3步 ）

　　push()    跳转路由

 this.props.history.push({
    pathname: "/xxx/路径/...", 
    params: {  // 跳转后带出的信息
        a: xxxx,
        b:xxxx
    } 
})

// 获取信息  console.log(this.props.location.params)

　　replace()  （替换掉当前的 history 记录）

 

---

React 中如何使用路由

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={组件}/>

3.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 如果放函数，一定要放有名的函数组件，

　　　　不然（匿名函数）点击多次本路由，会多次挂载和卸载

　　　　当组件拿不到 props 下，路由的相关信息时，可以使用 withRouter 去包一下

　　一般判断使用可选组件，使用 render={(props)=>{}}

 

3.2：render 可以返回 jsx 或者一个组件，更喜欢通过 render 去判断使用需求的组件。

3.3：children 跟一个函数，不管你匹不匹配path都执行组件。

 

4. 特性：

　　默认配置如果/下有组件，那么所有关于/xxx都吃得到/下的这个组件

　　如果，/下匹配组件，/下的xxx不想匹配/这个组件，那么可以在Route 下

　　加一个 exact

 

exact： 不写默认是 false

　　若果 /father 写了 exact 那么 /father/child 只会匹配到 /father ，所以建议在子路由中添加。

　　/one    /one/two    true    no

　　/one    /one/two    false   yes

 

strict： 严格匹配，默认 false

　　在 path 为 /detail/ 没有加 strict 那么 url 为 /detail 是能够匹配的

　　加了 strict 的时候，能匹配 /detail/ 或者 /detail/xxx

 

可以2个一起用：

<Route path="/one" exact strict component={About}/>

---

Link （跳转）　　

　　to=对象，带参数跳转（pathname, query, hash, state(额外数据）），注意:这些参数都被存放到 this.props.location 中

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

class About extends Component {
  render() {
    console.log(this.props)
    return (
      <div>
        <Link to={{
          pathname: "/jump/url",
          hash: '#ahash',
          query: { foo: 'foo', boo: 'boo' },
          state: { data: 'hello' }
        }}>
        </Link>
      </div>
    );
  }
}

export default About;

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， Redirect } 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}/>
　　　　　　<Redirect from="/* to="/"> // 重定向，路径发生错误，会 to 到指定的默认路径 
        </Switch>
      </div>
    );
  }
}

export default App;

 （当组件拿不到 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);

---

PropTypes： 能够验证父级传递进来的数据类型（为了报错）

import PropTypes from 'prop-types';

PPa.propTypes = {
    name: PropTypes.string
    //num:PropTypes.number
    //num:PropTypes.数据类型
}
PPa.defaultProps = { // 设置默认值
    name: "张三"
}