本港台开奖现场直播 j2开奖直播报码现场
当前位置: 新闻频道 > IT新闻 >

码报:【j2开奖】【第714期】ReactRouter 4 前瞻(2)

时间:2016-09-26 13:03来源:香港现场开奖 作者:j2开奖直播 点击:
判断路由命中时该渲染哪个组件的 props 还是叫 component,但是为一个路由同时提供多个命名组件的 props components 没有了。下文会详细介绍在 ReactRouter 中如何

  判断路由命中时该渲染哪个组件的 props 还是叫 component,但是为一个路由同时提供多个命名组件的 props components 没有了。下文会详细介绍在 ReactRouter 中如何解决一个路由下渲染多个组件的问题。

  3. 使用 render 渲染行内路由组件

  能够更自由的控制当前命中组件的渲染,以及可以方便的添加进出的动画。

  

码报:【j2开奖】【第714期】ReactRouter 4 前瞻

  <Miss> 取代曾经的 <NotFoundRoute>

  早在 0.x 时代,ReactRouter 提供了 <NotFountRoute> 来解决渲染 404 页面的问题。不过这一组件在 1.x 时就被移除了,你不得不多写若干行代码来解决这个问题。

  

码报:【j2开奖】【第714期】ReactRouter 4 前瞻

  在 ReactRouter 4 中,你可以省点儿事直接用 <Miss> 组件。

  

码报:【j2开奖】【第714期】ReactRouter 4 前瞻

  ReactRouter 4 的大杀器:一个路由,多次匹配

  在上文中我们提到过,目前 ReactRouter 匹配到某个路由时,将直接渲染通过 component 定义的组件,并把命中的子路由对应的组件作为 this.props.children 传入。

  在前端 App 日益复杂的今天,一条路由的改变不仅仅简单的是页面的切换,甚至可能精细到页面上某些组件的切换。

  让我们直接看下面的代码:

  

码报:【j2开奖】【第714期】ReactRouter 4 前瞻

  通过上面的代码片段我们可以看出,<Match> 的设计理念完全不同于 <Route>。使用 <Match> 可以让我们在当前路由中尽情的匹配并渲染需要的组件,无论是需要渲染 Sidebar、BreadCrumb 还是主界面。

  若使用现有的 ReactRouter API,只能通过当前路由匹配主界面对应的组件,至于 Sidebar 和 BreadCrumb,atv直播,只能传入当前的 pathname 手动进行匹配。由此可见 <Match> 将会为此类需求带来极大的便利。

  其他疑惑

  当然,还有几个大家普遍关心的问题官方文档中也有所提及:

  1. ReactRouter 的 API 是否还会有大的变化?

  答:只要 React 的 API 不变,这一版的 API 也不会变。

  2. 是否有对 Redux 的支持?

  答:将提供一个受控的 <ControlledRouter>,支持传入一个 location。(作者注:这下真的不需要 react-router-redux 了,撒花!)

  3. 新版是否对滚动位置管理添加支持?

  答:将会对 window 和独立组件的滚动位置提供管理功能。(作者注:目前在不添加额外配置的情况下,路由切换时并不会恢复滚动位置)

  ReactRouter 4 小结

  了解了这么多 ReactRouter 4 的内容,你是否喜欢新版的 API 设计呢?

  其实从 ReactRouter 4 的这些变动不难看出,ReactRouter 正在努力的朝纯声明式的 API 方向迈进,一方面减少不必要的命令式 API,一方面也提供更语义化的路由匹配方案。

  此外新的 ReactRouter 也提供了非常强大的动态路由能力,甚至对嵌套路由也有所支持,这也是一个复杂的前端应用所必须的功能。

  参考资料

ReactRouter 4 文档

ReactRouter 4 Github repo

ReactRouter

(责任编辑:本港台直播)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
栏目列表
推荐内容