react-routerv4.0学习总结

1.引用：react-router还是react-router-dom?

这两个包这要引用一个就可以了，不同之处在于后者比前者多了类似于<Link>、<BrowerRouter>这样的DOM组件。

大多数情况下，我们将会引用react-router-dom。如果搭配redux,还需要引用react-router-redux。

2.<Route>组件：当页面的url地址和<Route>组件的path属性匹配时就渲染出对应的ui界面。

(1).Route组件自带三个render method和三个props:

render methods:  

 每种render method都有特殊的应用场景，一个Route组件应该只使用一种render方法，大多数情况下我们会使用component.

   a. render: func

       用于内联渲染，不会产生重复装载问题。

<Route path="/home" render={() => <h1>Home</h1} />

// 包装 组合
const FadingRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => (
    <FadeIn>
      <Component {...props} />
    </FaseIn>
  )} />
)

<FadingRoute path="/cool" component={Something} />

   b. component:

       只有当访问的地址和path属性匹配时，这个react component才会被渲染，

       此时组件接受route props(match,props,location).当使用component时，router将使用React.createElement创建

       一个新的react元素。若使用内联函数传值给component,将产生不必要的重复装载，对于内联函数，请使用render进行渲染

<Route path="/user/:username" component={User} />
const User = ({ match }) => {
  return <h1>Hello {match.params.username}!</h1>
}

   c. children: func

      有时候你可能只想知道访问地址是否被匹配，然后改变下别的东西，而不仅仅是对应的页面。

<ul>
  <ListItemLink to="/somewhere" />
  <ListItemLink to="/somewhere-ele" />
</ul>

const ListItemLink = ({ to, ...rest }) => (
  <Route path={to} children={({ match }) => (
    <li className={match ? 'active' : ''}>
      <Link to={to} {...rest} />
    </li>
  )}
)

props:

    a. math:

    b. location:

    c. history:

    所有的渲染方法都将传入这三个props。

(2).其他props:

path: 有效的url路径

exact: （是否严格匹配）只有path与location.pathname完全匹配时才会渲染

path	location.pathname	exact	matches?
/one	/one/two	        true	no
/one	/one/two	        false	yes

strict:  （对路径末尾斜杠的匹配） 

path	location.pathname	matches?
/one/	/one	                no
/one/	/one/	                yes
/one/	/one/two	        yes

如果要确保路由没有末尾斜杠，那么 strict 和exact 都必须同时为 true！！！

3.<switch>组件：只渲染出第一个与当前访问地址匹配的 <Route> 或 <Redirect>。

<Switch> 下的子节点只能是 <Route> 或 <Redirect> 元素。只有与当前访问地址匹配的第一个子节点才会被渲染。 <Route> 元素用它们的 path 属性匹配， <Redirect> 元素使用它们的 from 属性匹配。如果没有对应的 path 或 from，那么它们将匹配任何当前访问地址。

4.<Redirect>组件：渲染时将导航到一个新地址，这个新地址覆盖在访问历史信息里面的本该访问的那个地址。

to (string or object) : 重定向的url字符串或location对象

from (string) : 将要被重定向的url地址

push (boolean) : 若为真，则重定向操作将会把要访问的地址添加到历史记录里，并且无法回到前一个页面。

5.<Prompt> : 当用户离开当前页面时做出一些提示。

when (bool) : 通过设置一定条件决定是否启用Prompt。

message (string or func)  :  当用户离开页面时，设置的提示信息或回调函数（回调函数接受location对象作为参数）。

6.对象和方法：

history :

        length: 历史堆栈中的条目数量

        action: 当前动作（push , pop, replace）

        location: 当前位置

            - pathname: url路径

            - search: url查询串

            - hash: url中的hash片段

            - state:  特定于位置的状态

        push(path [, state]): 将新条目推入历史堆栈

        replace(path [, state]): 替换历史堆栈上的当前条目

        goBack(): go(-1)

        go(n): 将history中的指针向前移动n

        goForward: go(1)

        block(prompt): 阻止导航

location :

    history 对象是可变的，因为建议从 <Route> 的 prop 里来获取 location，而不是从 history.location 直接获取。

    这样可以保证 React 在生命周期中的钩子函数正常执行，例如以下代码：   

class Comp extends React.Component {
  componentWillReceiveProps(nextProps) {
    // locationChanged
    const locationChanged = nextProps.location !== this.props.location

    // 错误方式，locationChanged 永远为 false，因为history 是可变的
    const locationChanged = nextProps.history.location !== this.props.history.location
  }
}

    location 对象不会发生改变，因此可以在生命周期的回调函数中使用 location 对象来查看当前页面的访问地址是否

    发生改变。这种技巧在获取远程数据以及使用动画时非常有用。

componentWillReceiveProps(nextProps) {
  if (nextProps.location !== this.props.location) {
    // 已经跳转了！
  }
}

    在以下情境中可以获取 location 对象：

• 在 Route component 中，以 this.props.location 获取
• 在 Route render 中，以 ({location}) => () 方式获取
• 在 Route children 中，以 ({location}) => () 方式获取
• 在 withRouter 中，以 this.props.location 的方式获取

match : 包含了Route对象如何与url匹配的信息。

    params( object ): 通过解析url中动态部分获得的键值对。

    isExact( boolean ): 为true时，整个url都需要匹配。

    path( string ): 用来匹配url的模式。

    url( string ): url匹配的部分。

在以下情境中可以获取 match 对象

• 在 Route component 中，以 this.props.match获取
• 在 Route render 中，以 ({match}) => () 方式获取
• 在 Route children 中，以 ({match}) => () 方式获取
• 在 withRouter 中，以 this.props.match的方式获取
• matchPath 的返回值

当一个 Route 没有 path 时，它会匹配一切路径。