react之router

路由

router 文档

安装

npm install react-router-dom

BrowerserRouter //histroy 路由
HashRouter //hash 路由
Link 地址栏改变
NavLik 地址栏改变
Route 根据地址栏变化渲染组件
Redirect 重定向(一定要放在Switch中)
Switch 只匹配一个
exact 精确匹配 完全匹配

组件分类
1.类组件

class App extends Component

2.函数组件 通过函数创建 没有state 有props ui组件 影子组件 傻瓜组件

const App=()=>{
	return (jsx代码)
}

声明式导航

App.js

import React, { Component,Fragment } from 'react';//Fragment不会被渲染到页面
import {BrowserRouter,HashRouter,NavLink,Link,Route,Switch,Redirect}from 'react-router-dom'

const c=()=>{
    console.log(this)//不存在
    return(
        <div>这里是CCCCCC</div>
      )
}
const b=()=>{
  return(
        <div>这里是BBBBB</div>
      )
}
class a extends Component {
  render() {
    console.log(this)
    return(
        <div>这里是AAAAAA</div>
      )
    }
}
class App extends Component {
  render() {
    return(
      <Fragment>
        <BrowserRouter>
          <ul>
            <li>
              <Link to="/a">AAAAA</Link>
            </li>
            <li>
              <NavLink activeClassName='active' to='/b'>BBBBB</NavLink>
            </li>
            <li>
              <NavLink activeClassName='active' to='/c'>CCCCC</NavLink>
            </li>
          </ul>
          <Route path="/a" component={a}></Route>
          <Route path="/b" component={b}></Route>
          <Route path="/c" component={c}></Route>

        </BrowserRouter>
        <HashRouter>
          <ol>
            <li>
              <Link to="/a/1">AAAAA</Link>
            </li>
            <li>
              <Link to="/a/2">AAAAA</Link>
            </li>
            <li>
              <Link to="/a/3">AAAAA</Link>
            </li>
          </ol>
          <Route exact path="/a" component={a}></Route>
          <Route path="/a" component={a}></Route>
          <Route path="/a/1" component={a}></Route>
          <Route path="/a/2" component={a}></Route>
          <Route path="/a/3" component={a}></Route>
          <hr/>
          <Switch>
            <Redirect exact from="/" to="/a"></Redirect>
            <Route path="/a" component={a}></Route>
            <Route path="/a/1" component={a}></Route>
            <Route path="/a/2" component={a}></Route>
            <Route path="/a/3" component={a}></Route>
          </Switch>
        </HashRouter>
      </Fragment>
    )
  }
}

export default App;

在上述代码中有一个非常有意思的现象，先点击BrowserRouter中的link再点击HashRouter中的link会在路由地址中拼接。同时出现时又不会互相干扰,难道HashRouter真的是hash?
而先点击HashRouter再点击BrowserRouter却会覆盖。

自定义导航 必须路由对象

1.Route 引用的模块 render component children
2.withRouter(组件)

import React, { Component,Fragment } from 'react';
import {BrowserRouter,HashRouter,Route,Switch,withRouter}from 'react-router-dom'

const c=()=>{
    console.log(this)//不存在
    return(
        <div>这里是CCCCCC</div>
      )
}
const b=()=>{
  return(
        <div>这里是BBBBB</div>
      )
}
class a extends Component {
  render() {
    console.log(this)
    return(
        <div>这里是AAAAAA</div>
      )
    }
}

class PushRoute extends Component {
  pushHistory(routeVal){
    this.props.history.push({pathname:'/'+routeVal,aaa:{id:111}})
    //this.props.history.push({pathname:'/#/'+routeVal,aaa:{id:111}})
    //this.props.history.push({pathname:'/'+routeVal,hash:"#123"})
    //this.props.history.push({pathname:'/'+routeVal,search:"?id=123"})
  }
  render(){
    return(
      <ul>
        <li onClick={this.pushHistory.bind(this,'a')}>AAA</li>
        <li onClick={this.pushHistory.bind(this,'b')}>BBB</li>
        <li onClick={this.pushHistory.bind(this,'c')}>CCC</li>
      </ul>
    )
  }
}
const WithPushRoute = withRouter(PushRoute);

class App extends Component {
  render() {
    return(
      <Fragment>
        <BrowserRouter>
          <WithPushRoute></WithPushRoute>
           <Switch>
              <Route component={a} path='/a'/>
              <Route component={b} path='/b'/>
              <Route component={c} path='/c'/>
           </Switch>
        </BrowserRouter>
        <hr/>
        <HashRouter>
          <WithPushRoute></WithPushRoute>
          <Switch>
              <Route component={a} path='/a'/>
              <Route component={b} path='/b'/>
              <Route component={c} path='/c'/>
           </Switch>
        </HashRouter>
      </Fragment>
    )
  }
}
export default App;

在上述代码中同样有一样的情况，但是在点击AAA时控制台打印输出的props下的location下的pathname居然是"/a",而正规的hash中却为空,这…HashRouter真的是hash值吗?
甚至出现http://localhost:3000/b#/a的url时location中的pathname居然仍然是"/a"