react-router基本使用

编程式导航(withRouter用法)

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

goBack(){
    this.props.history.goBack();
}  
goDetail(){
    this.props.history.push('/detail');
}  
goDetailWithParam(item){
    this.props.history.push({pathname : '/cart',state:{item}});
}
    
<span className="ico" onClick={this.goBack.bind(this)}>
    <i className="iconfont">&#xe501;</i>
</span>
//这里的item来自for循环的每一项
<li onClick={this.goDetailWithParam.bind(this,item)} key={encodeURI(item.imgUrl)}>

export default withRouter(Header);

引入withRouter之后,就可以使用编程式导航进行点击跳转, 需要注意的是export default的暴露如上面所写,如果结合redux使用,则暴露方式为: withRouter(connect(...)(MyComponent))

调用history的goBack方法会返回上一历史记录

调用history的push方法会跳转到目标页,如上面goDetail方法

跳转传参: push()可以接收一个对象参数,跳转之后,通过this.props.location.state接收

<BrowserRouter>
    <div className="App">
        <Switch>
            <Route exact path="/" component={Home}/>
            <Route exact path="/home" component={Home}/>
            <Route exact path="/playDeteil" component={PlayDetail}/>
            <Redirect to='/home'></Redirect>
        </Switch>
    </div>
</BrowserRouter>

按需加载

$ npm i -S react-loadable

1.在页面组件文件夹中新建loadable.js

import React from 'react';
import Loadable from 'react-loadable';
import Loading from './../../components/PageLoad';     // 过场组件
 
const LoadableComponent = Loadable({
  loader: () => import('./'),       // 当前文件下的组件（index.js）
  loading: Loading,
});
 
export default () => <LoadableComponent/>;

2.在路由js中引入component时，引入loadable.js

// 原始用法
import Home from './../views/home';
// loadable时引入方式
import Home from './../views/home/loadable';

3.如果跳转路由需要传参时，因为使用loadable组件包裹，所以需要使用withRouter让包裹的组件也能获取props。

import { withRouter } from 'react-router-dom';
...
export default withRouter(Component);

重要API一览

路由容器组件

BrowserRouter ：包裹整个应用
Router ：路由对应渲染组件，可嵌套
Link ：跳转专用
BrowserRouter:

浏览器自带的API，restful风格（需要后台做相应的调整）；

HashRouter:

使用hash方式进行路由；

MemoryRouter:

在内存中管理history，地址栏不会变化。在reactNative中使用。

Route标签

- 该标签有三种渲染方式component、render、children（绝大多数情况使用component组件就好了）；
- 三种渲染方式都会得到三个属性match、history、location；
- 渲染组件时，route props跟着一起渲染；
- children方式渲染会不管地址栏是否匹配都渲染一些内容，在这里加动画一时很常见的做法。

Link标签

- to: 后面可以接字符串，也可以跟对象（对象可以是动态地添加搜索的信息）；
- replace: 当设置为true时，点击链接后将使用新地址替换掉访问历史记录里面的原地址。

NavLink标签

- 是的一个特定版本, 会在匹配上当前URL的时候会给已经渲染的元素添加样式参数；
- activeClassName: 当地址匹配时添加相应class；
- activeStyle: 当地址匹配时添加相应style；
- exact: 当地址完全匹配时，才生效；
- isActive: 添加额外逻辑判断是否生效。

Prompt标签

- when: when的属性值为true时启用防止转换；
- message: 后面可以跟简单的提示语，也可以跟函数，函数是有默认参数的。

Redirect标签

- 可以写在的render属性里面，也可以跟平级；
- to: 依旧是可以跟字符串或对象；
- push: 添加该属性时，地址不会被覆盖，而是添加一条新纪录；
- from: 重定向，与平级时。

match

- params: 通过解析URL中动态的部分获得的键值对；
- isExact: 当为true时，整个URL都需要匹配；
- path: 在需要嵌套的时候用到；
- url: 在需要嵌套的时候会用到；
- 获取方式: 以this.props.match方式。

import {
  BrowserRouter as Router, // 或者是HashRouter、MemoryRouter
  Route,   // 这是基本的路由块
  Link,    // 这是a标签
  Switch   // 这是监听空路由的,(/a, /b不使用时会先匹配'/')
  Redirect // 这是重定向
  Prompt   // 防止转换  
} from 'react-router-dom'

权限控制

利用组件内的Redirect标签

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => (
    fakeAuth.isAuthenticated ? (
      <Component {...props}/>
    ) : (
      <Redirect to={{
        pathname: '/login',
        state: { from: props.location }
      }}/>
    )
  )}/>
)

阻止离开当前路由

在组件内部添加Prompt标签来进行权限控制

<Prompt
  when={isBlocking}
  message={location => (
    `你真的要跳转到 ${location.pathname}么？`
  )}
/>

过渡动画

样式分别定义：.example-enter、.example-enter.example-enter-active、.example-leave、.example-leave.example-leave-active。

实例

<ReactCSSTransitionGroup
  transitionName="fade"
  transitionEnterTimeout={300}
  transitionLeaveTimeout={300}
>
  <!-- 这里和使用 ReactCSSTransitionGroup 没有区别，唯一需要注意的是要把你的地址（location）传入「Route」里使它可以在动画切换的时候匹配之前的地址。 -->
  <Route
    location={location}
    key={location.key}
    path="/:h/:s/:l"
    component={HSL}
  />
</ReactCSSTransitionGroup>