React Router v4 入坑指南(小结)


Posted in Javascript onApril 08, 2018

距离React Router v4 正式发布也已经过去三个月了,这周把一个React的架子做了升级,之前的路由用的还是v2.7.0版的,所以决定把路由也升级下,正好“尝尝鲜”...

江湖传言,目前官方同时维护 2.x 和 4.x 两个版本。(?(。ꏿ?ꏿ)ノ゙咦,此刻相信机智如我的你也会发现,ReactRouter v3 去哪儿了?整丢了??巴拉出锅了???敢不敢给我个完美的解释!?)事实上 3.x 版本相比于 2.x 并没有引入任何新的特性,只是将 2.x 版本中部分废弃 API 的 warning 移除掉而已。按照规划,没有历史包袱的新项目想要使用稳定版的 ReactRouter 时,应该使用 ReactRouter 3.x。目前 3.x 版本也还处于 beta 阶段,不过会先于 4.x 版本正式发布。如果你已经在使用 2.x 的版本,那么升级 3.x 将不会有任何额外的代码变动。

礼貌性简介下

React Router v4 入坑指南(小结)

React Router V4 相较于前面三个版本有根本性变化,首先是遵循 Just Component 的 API 设计理念,其次API方面也精简了不少,对新手来说降低了学习难度,但如果是对之前项目的重构,嗯,简直无**可说。本次升级的主要特点如下:

  • 声明式(Declarative)
  • 可组合 (Composability)

React Router V4 遵循了 React 的理念: 万物皆组件 。因此 升级之后的 Route、Link、Switch等都是一个普通的组件。

React Router V4 基于 Lerna 管理多个 Repository。在此代码库包括:

  1. react-router React Router 核心
  2. react-router-dom 用于 DOM 绑定的 React Router
  3. react-router-native 用于 React Native 的 React Router
  4. react-router-redux React Router 和 Redux 的集成
  5. react-router-config 静态路由配置帮助助手

插件初引入

通常我们在 React 的使用中,一般要引入两个包, react 和  react-dom ,那么 react-routerreact-router-dom 是不是两个都要引用呢? 注意,前方高能,入门第一坑就在这里 。他们两个只要引用一个就行了,不同之处就是后者比前者多出了 <Link> <BrowserRouter> 这样的 DOM 类组件。因此我们只需引用 react-router-dom 这个包就OK了。当然,如果搭配 redux ,你还需要使用 react-router-redux

主要组件简介

在4.0之前版本的 API 中, <Router> 组件的 children 只能是 React Router 提供的各种组件,如 <Route>、<IndexRoute>、<Redirect> 等。而在 React Router 4 中,你可以将各种组件及标签放进 <Router> 组件中,他的角色也更像是 Redux 中的 <Provider> 。**不同的是 <Provider> 是用来保持与 store 的更新,而 <Router> 是用来保持与 location 的同步。**示例如下:

// 示例1
<Router>
 <div>
  <ul>
  <li><Link to="/">首页</Link></li>
  <li><Link to="/about">关于</Link></li>
  <li><Link to="/topics">主题列表</Link></li>
  </ul>

  <hr/>

  <Route exact path="/" component={Home}/>
  <Route path="/about" component={About}/>
  <Route path="/topics" component={Topics}/>
 </div>
 </Router>

Router是所有路由组件共用的底层接口,一般我们的应用并不会使用这个接口,而是使用高级的路由:

  1. <BrowserRouter> :使用 HTML5 提供的 history API 来保持 UI 和 URL 的同步;
  2. <HashRouter> :使用 URL 的 hash (例如:window.location.hash) 来保持 UI 和 URL 的同步;
  3. <MemoryRouter> :能在内存保存你 “URL” 的历史纪录(并没有对地址栏读写);
  4. <NativeRouter> :为使用React Native提供路由支持;
  5. <StaticRouter> :从不会改变地址;

TIPS:算是第二坑吧,和之前的Router不一样,这里 <Router> 组件下只允许存在一个子元素,如存在多个则会报错。

反面典型在这里:

<Router>
  <ul>
  <li><Link to="/">首页</Link></li>
  <li><Link to="/about">关于</Link></li>
  <li><Link to="/topics">主题列表</Link></li>
  </ul>

  <hr/>

  <Route exact path="/" component={Home}/>
  <Route path="/about" component={About}/>
  <Route path="/topics" component={Topics}/>
 </Router>

没错,示例2在没有 <div> 爸爸的保护下,会报如下异常信息:

React Router v4 入坑指南(小结)

我们知道,Route组件主要的作用就是当一个location匹配路由的path时,渲染某些UI。示例如下:

<Router>
 <div>
 <Route exact path="/" component={Home}/>
 <Route path="/news" component={NewsFeed}/>
 </div>
</Router>

// 如果应用的地址是/,那么相应的UI会类似这个样子:
<div>
 <Home/>
</div>

// 如果应用的地址是/news,那么相应的UI就会成为这个样子:
<div>
 <NewsFeed/>
</div>

<Route> 组件有如下属性:

  1. path(string): 路由匹配路径。(没有path属性的Route 总是会 匹配);
  2. exact(bool):为true时,则要求路径与location.pathname必须完全匹配;
  3. strict(bool):true的时候,有结尾斜线的路径只能匹配有斜线的location.pathname;

再次奉上两个鲜活的例子:

exact配置:

路径 location.pathname exact 是否匹配
/one /one/two true
/one /one/two false

 strict配置:

路径 location.pathname strict 是否匹配
/one/ /one true
/one/ /one/ true
/one/ /one/two true

同时,新版的路由为 <Route> 提供了三种渲染内容的方法:

  1. <Route component> :在地址匹配的时候React的组件才会被渲染,route props也会随着一起被渲染;
  2. <Route render> :这种方式对于内联渲染和包装组件却不引起意料之外的重新挂载特别方便;
  3. <Route children> :与render属性的工作方式基本一样,除了它是不管地址匹配与否都会被调用;

第一种方式没啥可说的,和之前一样,这里我们重点看下 <Route render> 的渲染方式:

// 行内渲染示例
<Route path="/home" render={() => <div>Home</div>}/>

// 包装/合成
const FadingRoute = ({ component: Component, ...rest }) => (
 <Route {...rest} render={props => (
 <FadeIn>
  <Component {...props}/>
 </FadeIn>
 )}/>
)

<FadingRoute path="/cool" component={Something}/>

TIPS: 第三坑! <Route component> 的优先级要比 <Route render> 高,所以不要在同一个 <Route> 中同时使用这两个属性。

和之前版本没太大区别,重点看下组件属性:

  1. to(string/object):要跳转的路径或地址;
  2. replace(bool): 为 true 时 ,点击链接后将使用新地址替换掉访问历史记录里面的原地址; 为 false 时 ,点击链接后将在原有访问历史记录的基础上添加一个新的纪录。 默认为 false

示例如下:

// Link组件示例

// to为string
<Link to="/about">关于</Link>

// to为obj
<Link to={{
 pathname: '/courses',
 search: '?sort=name',
 hash: '#the-hash',
 state: { fromDashboard: true }
}}/>

// replace 
<Link to="/courses" replace />

<NavLink><Link> 的一个特定版本, 会在匹配上当前 URL 的时候会给已经渲染的元素添加样式参数,组件属性:

  1. activeClassName(string):设置选中样式,默认值为 active;
  2. activeStyle(object):当元素被选中时, 为此元素添加样式;
  3. exact(bool):为 true 时, 只有当地址完全匹配 class 和 style 才会应用;
  4. strict(bool):为 true 时,在确定位置是否与当前 URL 匹配时,将考虑位置 pathname 后的斜线; isActive(func):判断链接是否激活的额外逻辑的功能;

从这里我们也可以看出,新版本的路由在组件化上面确实下了不少功夫,来看看NavLink的使用示例:

// activeClassName选中时样式为selected
<NavLink
 to="/faq"
 activeClassName="selected"
>FAQs</NavLink>

// 选中时样式为activeStyle的样式设置
<NavLink
 to="/faq"
 activeStyle={{
 fontWeight: 'bold',
 color: 'red'
 }}
>FAQs</NavLink>

// 当event id为奇数的时候,激活链接
const oddEvent = (match, location) => {
 if (!match) {
 return false
 }
 const eventID = parseInt(match.params.eventID)
 return !isNaN(eventID) && eventID % 2 === 1
}

<NavLink
 to="/events/123"
 isActive={oddEvent}
>Event 123</NavLink>

该组件用来渲染匹配地址的第一个 <Route> 或者 <Redirect> 。那么它与使用一堆route又有什么区别呢?

<Switch> 的独特之处是独它仅仅渲染一个路由。相反地,每一个包含匹配地址(location)的 <Route> 都会被渲染。思考下面的代码:

<Route path="/about" component={About}/>
<Route path="/:user" component={User}/>
<Route component={NoMatch}/>

如果现在的URL是 /about ,那么 <About> , <User> , 还有 <NoMatch> 都会被渲染,因为它们都与路径(path)匹配。这种设计,允许我们以多种方式将多个 <Route> 组合到我们的应用程序中,例如侧栏(sidebars),面包屑(breadcrumbs),bootstrap tabs等等。 然而,偶尔我们只想选择一个 <Route> 来渲染。如果我们现在处于 /about ,我们也不希望匹配 /:user (或者显示我们的 “404” 页面 )。以下是使用 Switch 的方法来实现:

<Switch>
 <Route exact path="/" component={Home}/>
 <Route path="/about" component={About}/>
 <Route path="/:user" component={User}/>
 <Route component={NoMatch}/>
</Switch>

现在,如果我们处于 /about<Switch> 将开始寻找匹配的 <Route><Route path="/about"/> 将被匹配, <Switch> 将停止寻找匹配并渲染 <About> 。同样,如果我们处于 /michael<User> 将被渲染。

以上就是我对React Router v4 的初试,反正也是一边查文档,一边试水的,如有错误或疏漏,还请大家谅解并不吝指正!也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
如何用javascript判断录入的日期是否合法
Jan 08 Javascript
jQuery EasyUI API 中文文档 - ValidateBox验证框
Oct 06 Javascript
JS正则表达式验证数字代码
Jan 28 Javascript
原生Js实现简易烟花爆炸效果的方法
Mar 20 Javascript
jquery超简单实现手风琴效果的方法
Jun 05 Javascript
纯css实现窗户玻璃雨滴逼真效果
Aug 23 Javascript
jquery遍历函数siblings()用法实例
Dec 24 Javascript
VUE axios上传图片到七牛的实例代码
Jul 28 Javascript
详解原生JS回到顶部
Mar 25 Javascript
vue实现固定位置显示功能
May 30 Javascript
Vue项目开发常见问题和解决方案总结
Sep 11 Javascript
JS绘图Flot如何实现可选显示曲线图功能
Oct 16 Javascript
Angular 5.x 学习笔记之Router(路由)应用
Apr 08 #Javascript
vue2.0 资源文件assets和static的区别详解
Apr 08 #Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
Apr 08 #Javascript
vuex 项目结构目录及一些简单配置介绍
Apr 08 #Javascript
JS求Number类型数组中最大元素方法
Apr 08 #Javascript
angular2模块和共享模块详解
Apr 08 #Javascript
vue下拉列表功能实例代码
Apr 08 #Javascript
You might like
ADODB的数据库封包程序库
2006/12/31 PHP
php使用Smarty的相关注意事项及访问变量的几种方式
2011/12/08 PHP
C#静态方法与非静态方法实例分析
2014/09/22 PHP
基于jQueryUI和Corethink实现百度的搜索提示功能
2016/11/09 PHP
WordPress免插件实现面包屑导航的示例代码
2020/08/20 PHP
JS判断元素为数字的奇异写法分享
2012/08/01 Javascript
js获取GridView中行数据的两种方法 分享
2013/07/13 Javascript
js设置组合快捷键/tabindex功能的方法
2013/11/21 Javascript
浅谈jQuery事件绑定原理
2015/01/02 Javascript
jQuery前端分页示例分享
2015/02/10 Javascript
Extjs 点击复选框在表格中增加相关信息行
2016/07/12 Javascript
jquery动态遍历Json对象的属性和值的方法
2016/07/27 Javascript
JS实现留言板功能
2017/06/17 Javascript
利用JS测试目标网站的打开响应速度
2017/12/01 Javascript
在vscode中统一vue编码风格的方法
2018/02/22 Javascript
vue 组件中slot插口的具体用法
2018/04/03 Javascript
使用node.JS中的url模块解析URL信息
2020/02/06 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
2020/07/26 Javascript
原生JS实现音乐播放器
2021/01/26 Javascript
[07:48]DOTA2上海特级锦标赛主赛事首日RECAP
2016/03/04 DOTA
Linux下使用python调用top命令获得CPU利用率
2015/03/10 Python
python中函数传参详解
2016/07/03 Python
深入理解 Python 中的多线程 新手必看
2016/11/20 Python
详解Python中最难理解的点-装饰器
2017/04/03 Python
小米5s微信跳一跳小程序python源码
2018/01/08 Python
Python基础之文件读取的讲解
2019/02/16 Python
python 实现返回一个列表中出现次数最多的元素方法
2019/06/11 Python
Pytorch实现基于CharRNN的文本分类与生成示例
2020/01/08 Python
有趣的Python图片制作之如何用QQ好友头像拼接出里昂
2020/04/22 Python
python在linux环境下安装skimage的示例代码
2020/10/14 Python
jupyter notebook远程访问不了的问题解决方法
2021/01/11 Python
基于Html5实现的react拖拽排序组件示例
2018/08/13 HTML / CSS
报考公务员诚信承诺书
2014/08/29 职场文书
四风问题对照检查材料整改措施
2014/09/27 职场文书
残联2016年全国助残日活动总结
2016/04/01 职场文书
python中filter,map,reduce的作用
2022/06/10 Python