react-router4笔记

前两天在写react项目的时候发现在路由上面走了很多的弯路。正所谓磨刀不误砍柴工，还是先系统地学习一下吧…

重要API一览

路由容器组件

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   // 这是监听空路由的
  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>

按需加载

官方方法

借助bundle-loader实现按需加载。
新建一个bundle.js文件：

import React, { Component } from 'react'
export default class Bundle extends React.Component {
  state = {
    // short for "module" but that's a keyword in js, so "mod"
    mod: null
  }
  componentWillMount() {
    this.load(this.props)
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps.load !== this.props.load) {
      this.load(nextProps)
    }
  }
  load(props) {
    this.setState({
      mod: null
    })
    props.load((mod) => {
      this.setState({
        // handle both es imports and cjs
        mod: mod.default ? mod.default : mod
      })
    })
  }
  render() {
    if (!this.state.mod)
      return false
    return this.props.children(this.state.mod)
  }
}

在入口处使用按需加载：

// bundle模型用来异步加载组件
import Bundle from './bundle.js';
// 引入单个页面（包括嵌套的子页面）
// 同步引入
import Index from './app/index.js';
// 异步引入
import ListContainer from 'bundle-loader?lazy&name=app-[name]!./app/list.js';
const List = () => (
  <Bundle load={ListContainer}>
    {(List) => <List />}
  </Bundle>
)
<HashRouter>
  <Router basename="/">
    <div>
      <Route exact path="/" component={Index} />
      <Route path="/list" component={List} />
    </div>
  </Router>
</HashRouter>

webpack.config.js文件配置：

output: {
  path: path.resolve(__dirname, './output'),
  filename: '[name].[chunkhash:8].bundle.js',
  chunkFilename: '[name]-[id].[chunkhash:8].bundle.js',
},

个人觉得更好用的写法

import Loadable from 'react-loadable'
import Loading from './my-loading-component'
Loadable({
  loader: () => import(`views/AsyncView`),
  // 如果没有loading动画，就返回null
  LoadingComponent: () => null,
  // 如果有loading动画，则如下
  loading: Loading
})

webpack配置：

// 添加插件babel-plugin-import-inspector
{
  "plugins": [
    ["import-inspector", {
      "serverSideRequirePath": true,
      "webpackRequireWeakId": true,
    }]
  ]
}