React项目通常都有很多的URL需要管理,最常使用的解决方案就是React Router了,最近学习了一下,主要是看了一下官方的英文文档,加以总结,以备后查。
React Router是做什么的呢,官方的介绍是:
A complete routing library for React,keeps your UI in sync with the URL. It has a simple API with powerful features like lazy code loading,dynamic route matching,and location transition handling built right in. Make the URL your first thought,not an after-thought.
大意即:让UI组件和URL保持同步,通过简单的API即可实现强大的特性如:代码懒加载,动态路由匹配,路径过渡处理等。
下面是一些React Router的用法:
一 简单渲染Route
有一点需要牢记于心,Router 是作为一个React组件,可以进行渲染。
这里使用了hashHistory - 它管理路由历史与URL的哈希部分。
添加更多的路由,并指定它们对应的组件
二 Link
render() {
return (
React Router Tutorial
这里使用了Link 组件,它可以渲染出链接并使用 to 属性指向相应的路由。
三 嵌套路由
如果我们想添加一个导航栏,需要存在于每个页面上。如果没有路由器,我们就需要封装一个一个nav组件,并在每一个页面组件都引用和渲染。随着应用程序的增长代码会显得很冗余。React-router则提供了另一种方式来嵌套共享UI组件。
实际上,我们的app都是一系列嵌套的盒子,对应的url也能够说明这种嵌套关系:
因此,可以通过把子组件嵌套到 公共组件 App上使得 App组件上的 导航栏 Nav 等公共部分能够共享:
接下来,在App中将children渲染出来:
React Router Tutorial
{/* 注意这里将子组件渲染出来 */}
{this.props.children}