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. spring-wind 搭建过程问题记录

    最近想搭一个 shiro+ssm的快速开发框架,用于后台管理以及微信公众号的开发.后台主要是权限管理,于是选择有spring+shiro,微信公众号的前端页面搜了下有用velocity开发的,刚好看到 ...

  2. “云中论道”之——使用开源技术和Azure公有云服务快速搭建云端IoT解决方案(上)

    “云中论道”技术课堂第一课开讲啦!微软各路技术咖们齐聚一堂,为大家带来干货不断!作为“云中论道“课堂的开课之作,我们首先邀请到了微软Azure专家级的架构师:槐长清,他为我们带来了关于“使用开源技术和 ...

  3. laravel中delete()方法和destroy()方法的区别

    delete()方法是实例方法,需要查询到相应的数据并通过模型实例调用 destroy()方法可以直接调用,通过索引删除记录 举个栗子: /*delete()方法删除*/ //先查找记录 $blog ...

  4. c++新标准的一个问题

    显示转换运算符存在多个兼容版本的时候,explicit 关键字无效,编译器默认会选择那个兼容版本进行转换,而不是报错. 测试环境:gcc4.8.1 示例代码: class plebe { privat ...

  5. 复制collections

    use product-test; var cursor = db.user.find(); use product; while(cursor.hasNext()){db.user.insert(c ...

  6. [原]零基础学习在Android进行SDL开发后记

    本着学习交流记录的目的编写了这个系列文章,主要用来记录如何从零开始学习SDL开发的过程,在这个过程中遇到了很多问题,差点就放弃了.首先是SDL的Android移植的时候遇到了比较坑的是SDL移植到An ...

  7. sql 获取每个分组的前N条记录的写法

    SELECT * FROM ( --根据 tb表的name进行分组,根据年龄排序 SELECT * , ROW_NUMBER() OVER ( PARTITION BY name ORDER BY a ...

  8. 郝斌 SqlServer2005 学习笔记

    1.0 什么是数据库 狭义:存储数据的仓库. 广义:可以对数据进行存储和管理的软件以及数据本身统称为数据库. 另外一种说法:数据库是由表.关系.操作组成. 2.0 为什么要学习数据库 几乎所有的应用软 ...

  9. [原创] SiteServer 3.5 批量导入文章的SQL处理脚本

    2005时做过一个小网站,当时是用ASP+Access做的,功能很简单,但里面的文章不少 现在就像把它转移到SS上来,重点就是如何导入文章 本来SS本身提供了批量导入功能,但对于在WEB上一次性导入一 ...

  10. HDU 6467 简单数学题 【递推公式 && O(1)优化乘法】(广东工业大学第十四届程序设计竞赛)

    传送门:http://acm.hdu.edu.cn/showproblem.php?pid=6467 简单数学题 Time Limit: 4000/2000 MS (Java/Others)    M ...