React-router教程的内容补充

[GuoYongfeng]

React-router教程的内容补充

1.hashHistory和browserHistory的区别

React-router是基于history库来创建的。简单来讲，history可以知道如何监听浏览器地址栏的改变从而将URL解析到location对象中，这样的话，router就可以匹配到每一条routes并且正确的渲染一系列的组件。

• hashHistory将hash(#)用做URL的一部分，创建的路由类似这样：example.com/#/some/path，使用hashHistory的话就不需要在服务端配置，可以纯前端的控制路由的切换；那么，使用hashHistory的时候出现的_k=788ds2这样的参数是什么意思呢，因为当history通过pushState或是replaceState的方式在你的应用中进行转换的时候，history会保存“location state”导致新的location不会再URL中展示出来，这有点像在HTML的form表单进行post提交数据一样。
• Browser history 是由 React Router 创建浏览器应用推荐的 history。它使用 History API 在浏览器中被创建用于处理 URL，新建一个像这样真实的 URL example.com/some/path。

2.每一条Route中参数component和components有什么不一样

component的传入值只能为具体的组件
components的传入值可以为对象或具体的组件

3.尽量使用activeClassName来改变被触发的Link的展示样式

4.组件中是如何拿到路由相关的信息的

render(){
  console.log(this.props);
  return (.....);
}

5.this.context.route是从哪里来的

在每一条Route对应渲染的组件中都可以拿到this.context.route，这个对象上面挂载了很多API，setRouteLeaveHook这个是常用的。

6.为什么要设置组件的contextType

接口约束，如果这个组件写了调用路由相关的API进行操作，但是本身没有放在router下面进行渲染，会给出友好的提示。

[zhufengnodejs]

👍