react-router 4变化还是挺大的,看网上很多人遇到问题,都是基本用法的改变,所以这里记录一下。

http://www.jianshu.com/p/d6727e8d81c4

1.react-router 4.0升级不少内容,详细可看官网

https://reacttraining.com/react-router/web/api/Route/Route-render-methods

2.安装所必须要的包:

npm install --save-dev react-router

npm install --save-dev react-router-dom

所有安装成功的包都可以在package.js里面查看版本。

3.基本引用:(原Router变为HashRouter,具体组件的配置 参数参考官网)

4.react-router 4.0 对于接受参数采用 { this.props.match.params.id }

如下例子:<Route path="list/:id"></Router> 
        <Link to="list/123456"></Link>

获取参数值的方式是:{ this.props.match.params.id }

react-router 4.0版本使用笔记的更多相关文章

  1. React Router 4.0 实现路由守卫

    在使用 Vue 或者 Angular 的时候,框架提供了路由守卫功能,用来在进入某个路有前进行一些校验工作,如果校验失败,就跳转到 404 或者登陆页面,比如 Vue 中的 beforeEnter 函 ...

  2. react router 4.0以上的路由应用

    thead>tr>th{padding:8px;line-height:1.4285714;border-top:1px solid #ddd}.table>thead>tr& ...

  3. 初步学习React Router 4.0

      React Router 4.0 是react官方推荐的路由库.4是已经正式发布的最新版本. 初始化项目启动之后: npm run eject 弹出配置文件.自定义配置webpack 查看下pac ...

  4. React Router 4.0 + webpack 实现组件按需加载

    网上关于React Router 4.0的按需加载文章有很多,大致的思路都一样,但是其实具体实现起来却要根据自己的实际情况来定,这里主要介绍一下我的实现方式. 主要方式是通过Route组件的rende ...

  5. React Router 4.0 体验

    React Router 4.0 (以下简称 RR4) 已经正式发布,它遵循React的设计理念,即万物皆组件.所以 RR4 只是一堆 提供了导航功能的组件(还有若干对象和方法),具有声明式(声明式编 ...

  6. React Router V4.0学习笔记

    最近在学习React Router,但是网站的教程多半还是3.X版本之前的,所以我只能在GitHub上找到React Router的官方文档在读.后来总结了一下,包括学习经验以及V3.X与V4.X的差 ...

  7. React Router 4.0 基本使用

    路由的概念,起初来源于服务端,就是当浏览器访问一个网站的不同页面时,服务端能够正确的返回页面的内容.当访问首页时,它能返回首页的内容,访问关于我们页面时,返回关于我们的内容.可以看到路由就是一种控制和 ...

  8. react-router 4.0版本学习笔记

    Router 所有路由组件的底层接口,一般情况都不使用,而是使用更加高级的路由. 最常用的有两种<BrowserRouter>.<HashRouter> <Browser ...

  9. React Router 4.0 ---- 嵌套路由和动态路由

    嵌套路由,从广义上来说,分为两种情况:一种是每个路由到的组件都有共有的内容,这时把共有的内容抽离成一个组件,变化的内容也是一个组件,两种组件组合嵌套,形成一个新的组件.另一种是子路由,路由到的组件内部 ...

随机推荐

  1. Oracle基础之count(1)和count(*)的区别

    在数据库中Count(*)或者Count(1)或者Count([列])或许是最常用的聚合函数.很多人其实对这三者之间是区分不清的.本文会阐述这三者的作用,关系以及背后的原理. 我在网上看到一些所谓的优 ...

  2. 微软智能云Azure – 中国首家官方支持CoreOS的公有云

    北京2016年6月24日, 在由中国开源软件推进联盟(COPU)主办, 开源社协办,微软赞助的“第十一届开源中国开源世界高峰论坛”上,微软亚太研发集团云计算高级总监梁戈碧女士正式对外宣布一个令人振奋的 ...

  3. 学习笔记---Javascript事件Event、IE浏览器下的拖拽效果

    学习笔记---Javascript事件Event.IE浏览器下的拖拽效果     1. 关于event常用属性有returnValue(是否允许事件处理继续进行, false为停止继续操作).srcE ...

  4. 【SQL重温】面试之数据库基础练习

    简介 最近在练习SQL基础,首先感叹一下,在机器上写和在纸上写还是有区别的. 本文的练习题目请点击此链接进行查看:http://www.cnblogs.com/edisonchou/p/3878135 ...

  5. Python学习---重点模块之re

    正则表达式是用来操作字符串,但是字符串提供的正则是完全匹配,有时候我们需要进行模糊匹配,这个时候就需要正则表达式了.通过re模块来实现,由C语言来执行底层的匹配 字符匹配(普通字符,元字符): 1 普 ...

  6. Exchange 2016 体系结构简介

    一.Exchange 2016简介 现在,CPU计算能力的成本显著降低,不再成为约束因素.随着此约束因素的消失,Exchange2016的主要设计目标是简化扩展.提高硬件利用率和实现故障隔离:在Exc ...

  7. gmock使用、原理及源码分析

    1      初识gmock 1.1      什么是Mock 便捷的模拟对象的方法. 1.2      Google Mock概述 google mock是用来配合google test对C++项目 ...

  8. U-Mail邮件群发如何过滤无效地址?

    U-Mail邮件群发平台可以自动过滤掉无效和重复地址,过滤效果如下图 U-Mail邮件群发平台会将客户已经确认好是无效地址的加入无效地址库,下次再导入改无效地址就直接拒绝.邮件格式不正确的也会直接过滤 ...

  9. Graph 133. Clone Graph in three ways(bfs, dfs, bfs(recursive))

    Clone an undirected graph. Each node in the graph contains a label and a list of its neighbors. OJ's ...

  10. Python Django 分页

    Python Django 分页 http://www.360doc.com/content/14/0721/17/16044571_396090985.shtml