React学习——路由

路由

官网 中文官网
vue-router和react-router的区别:

vue-router react-router
分离式 嵌套式
排他性(只有一个路由被渲染) 包容性(多路由渲染)
静态路由 动态路由

安装
React Router被拆分成三个包:
react-router
react-router-dom
react-router-native

结构
BrowserRouter|HashRouter

  • 根组件(App)
    • NavLink|Link
    • Route
    • Redirect
      • 子组件
        • NavLink|Link
        • Route

BrowserRouter

import React from 'react';
import ReactDom,{render} from 'react-dom';
import {BrowserRouter, HashRouter, Route} from 'react-router-dom'
import Default from "./layouts/Default";

render(
  <BrowserRouter>
    <Route component={Default}/>
  </BrowserRouter>,
  document.getElementById('root')
);

Route
path:(string object)路由匹配路径。没有path属性的Route总是会匹配。
exact:(boolean)为true时,全局匹配(/home),多个Route可以同时匹配和渲染。
component:(function)匹配地址的时候React的组件才回被渲染。

 <Route path="/home" component={Home}/>

Link
to:(string) | {pathname,search,hash}要跳转的路径或地址
replace:(boolean) 是否替换历史记录

let {history,location,match}=props
<Link to={match.url+'/001'}/>
<Link to={`${match.url}/002?a=1&b=2`}/>
<Link to={{pathname:match.url+'/003',search:'?a=11&b=12',hash:'#a1'}}

NavLink
to:(string object)跳转的路径或地址
replace:(boolean) 是否替换历史记录
activeClassNamestring:当元素被选中时,设置选中样式,默认为active
activeStyle:(object)当元素被选中时,设置选中样式
exact:(Boolean)严格匹配

<NavLink activeClassName="default__nav--active" to="/home">首页</NavLink>

Switch
该组件用来渲染匹配地址的第一个Route或者Redirect,仅渲染一个路由,排他性路由,默认全匹配 (场景:侧边栏和面包屑,引导选项卡等
location:(string object)
children:(node)

Redirect
from:(string) 来自
to:(string object) 去向
push:(boolean) 添加历史记录
exact:(boolean) 严格模式
sensitive:(boolean) 区分大小写

参数数据传递

<Switch>
    <Redirect from="/" to="/home"/>
</Switch>

404

  <Route component={NoPage}/>  //总是会匹配

编程式跳转

history.push('/user?a=1&b=2')
history.push({pathname:'/user',search:'?a=11&b=22'})
history.replace({pathname:'/user',search:'?a=111&b=222'})
history.go(-1)

例子

import React from 'react';

export default class Home extends React.Component{
  render(){
    return (
      <div className="home">
        <h3>首页</h3>
        <button onClick={()=>this.props.history.push('/login')}>跳转</button>
        <button onClick={()=>this.props.history.push({pathname:'/goods/4',search:'a=3&b=4'})}>跳转2</button>
      </div>
    )
  }
}

非路由跳转组件

不是所有组件会通过路由跳转,也需要抓取路由上下文时,解决方案

  1. 通过路由跳转
  2. 通过属性传递
  3. 通过withRouter包装
import {withRouter} from 'react-router-dom'
class App extends Component{}
export default withRouter(App)

例子

import React from 'react';
import {withRouter} from 'react-router-dom';

class Child extends React.Component {
  render() {
    return (
      <div className="Child">
        <h3>Child</h3>
      </div>
    )
  }
}

export default withRouter(Child)

前置授权路由
需要自定义路由,具体为,自定义一个组件,代替Route,其内部根据条件返回一个Route 组件指向目标组件,或者Route的render函数内部判断加载目标,最后组件树关系为:switch>自定义组件>Route>目标组件

<Auth path="/goods" component={Goods} />
<Auth path="/user" component={User} />

export default class Auth extends React.Component{

  state={
    hasSendAuth:false,
    auth:false,
    data:{}
  };

  async componentDidMount(){
    let res = await axios({url:'/data/user.json'})
    console.log('数据回来了')
    this.setState({
      auth:res.data.auth,
      hasSendAuth:true,
      data:res.data.data
    })
  }

  render(){
    // console.log('渲染了',this.props)  //包含了path,component的一个传入
    let {component:Component} = this.props;//目标组件
    if (!this.state.hasSendAuth) return null;

    return <Route render={props=>(//...props 目标组件需要用到的路由信息
      this.state.auth ?
        <Component {...props} data={this.state.data} /> :// 数据预载
        <Redirect to="/login" />
    )}/>

  }
}

后置守卫

// reg.jsx
import { Prompt } from 'react-router-dom'
<Prompt
  when={this.state.isBlocking}
  message={location=>...}
/>

message: 后面可以跟简单的提示语,也可以跟函数,函数是有默认参数的。
when: when的属性值为true时防止跳转;


你可能感兴趣的:(reactjs,yarn,npm,es6)