React-Router 4 的新玩意儿

上一个项目用的仍是 2.6.1，转眼的功夫 4.0 都发布了，API 变化实在有点大，2.X那套东西不顶用了，老老实实从新看一遍文档，其中有几点须要注意的，拿出来讲一说。

本文只讨论针对浏览器的应用，使用 react-router-dom（在react-router基础上封装了一些高级组件）进行说明。

1. 关于BrowserRouter：

若是按照原来的使用方式，就掉进第一个坑里了：history不合法。

用 react-router-dom 中的 <HashRouter>组件代替原来的 <Router> 组件就能够了。

这是以前2.X版本处理浏览器路由的方式，4.0版本中推荐另外一个组件：<BrowserRouter >

换上<BrowserRouter >以后会出现 2 个问题：

若是你不是经过服务器启动应用，由于chrome自身的安全机制，在本地环境下根本不能用chrome玩。这个不关键，我本地测试换个浏览器还不行么，本地起个服务器也不麻烦。

关键问题，刷新就是404。缘由很简单，BrowserRouter 和 HashRouter 彻底不一样，前者利用H5的 history 接口，前台路由就是后台收到的路由，你点到其余页面一刷新，得，根本没这个文件，服务器也很无辜，到底让我渲染个啥？后台也能够简单的解决这个问题：甭管你请求的啥地址，我先把入口文件扔给你。node处理方式以下（须要express）：

app.get('*',(request,response)=>{

  response.sendFile(path.resolve(__dirname,'../index.html'))

})

 

启动node服务器，经过本机服务器访问，完美解决上面两个问题。

（<MemoryRouter> 和 <StaticRouter> 分别是非浏览器环境和服务器端渲染用的，在此不作讨论。）

2. BrowserRouter 里能够存在各类标签。

原来用惯了2.X的同志们，看到新文档的例子可能会发现这个问题：Router里边不是只能有Route么，怎么什么都有。是的，4.0中 Router 里能够存在各类标签。

3. 导航链接<NavLink>：

看名字就是导航用的，主要用途就是区分激活的状态，激活时的样式。以前揉柔在Link里的。

4. 只渲染第一个匹配的组件<Switch>：

一个路由可能同时匹配多个路径，在<Switch>中，只渲染匹配的第一个，其余的放弃。以前这是Router的默认行为，4.0中为何不默认了呢？答：能够将多个Route组合到页面中。想想，若是你就是想同时渲染多个组件而不仅是第一个呢？很欣慰看到我在2.X中吐槽的问题获得了解决。4.0版本给我最大的感受就是：他让浏览器更灵活的去渲染页面。

5. <Route>的渲染方法：

<Route component>

<Route render>

<Route children>

component和以前2.X的方法相同。

render能够传个函数避免建立新的React element（内联渲染时使用避免没必要要的重载）。

children使用方式与render一致，只不过不管路由是否匹配都会被渲染。

exact属性为 true 则须要路由彻底匹配时才渲染组件（以前也是默认行为）。

6. 三个重要对象：history，location，match

在 Route component 中，以 this.props.location 的方式获取，

在 Route render 中，以 ({ location }) => () 的方式获取，

在 Route children 中，以 ({ location }) => () 的方式获取，

History 和 match的获取方式相似。