判断路由命中时该渲染哪个组件的 props 还是叫 component,但是为一个路由同时提供多个命名组件的 props components 没有了。下文会详细介绍在 ReactRouter 中如何解决一个路由下渲染多个组件的问题。 3. 使用 render 渲染行内路由组件 能够更自由的控制当前命中组件的渲染,以及可以方便的添加进出的动画。
<Miss> 取代曾经的 <NotFoundRoute> 早在 0.x 时代,ReactRouter 提供了 <NotFountRoute> 来解决渲染 404 页面的问题。不过这一组件在 1.x 时就被移除了,你不得不多写若干行代码来解决这个问题。
在 ReactRouter 4 中,你可以省点儿事直接用 <Miss> 组件。
ReactRouter 4 的大杀器:一个路由,多次匹配 在上文中我们提到过,目前 ReactRouter 匹配到某个路由时,将直接渲染通过 component 定义的组件,并把命中的子路由对应的组件作为 this.props.children 传入。 在前端 App 日益复杂的今天,一条路由的改变不仅仅简单的是页面的切换,甚至可能精细到页面上某些组件的切换。 让我们直接看下面的代码:
通过上面的代码片段我们可以看出,<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 (责任编辑:本港台直播) |