标签搜索

React-Router V4

cicaba
2018-05-06 / 0 评论 / 5 阅读 / 正在检测是否收录...

react-router-dom
:使用 HTML5 提供的 history API 来保持 UI 和 URL 的同步;
:使用 URL 的 hash (例如:window.location.hash) 来保持 UI 和 URL 的同步;
:能在内存保存你 “URL” 的历史纪录(并没有对地址栏读写);
:从不会改变地址;

Route主件
path(string): 路由匹配路径。(没有path属性的Route 总是会 匹配);
exact(bool):为true时,则要求路径与location.pathname必须完全匹配;
strict(bool):true的时候,有结尾斜线的路径只能匹配有斜线的location.pathname;

Route渲染方式
:在地址匹配的时候React的组件才会被渲染,route props也会随着一起被渲染;
:这种方式对于内联渲染和包装组件却不引起意料之外的重新挂载特别方便;
:与render属性的工作方式基本一样,除了它是不管地址匹配与否都会被调用;

Switch主件
的独特之处是独它仅仅渲染一个路由。相反地,每一个包含匹配地址(location)的都会被渲染。思考下面的代码

路由嵌套
V4的嵌套,和V2V3相当不同
V4必须在主件的内部嵌套route例子如下:

import React, {Component} from 'react';
import {Route} from 'react-router-dom';
import lazyLoad from '../lazyLoad';
import Index from 'bundle-loader?lazy&name=home!./index';

export default class Login extends Component {
  render() {
    return (
      <div>测试
        <Route
          path={this.props.match.path + '/index'}
          render={() => {
            return lazyLoad(Index, {
              ...this.props
            });
          }}></Route>
      </div>
    );
  }
}
0

评论 (0)

取消