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. 利用NVM在系统中维护多个版本的nodejs

      0. 背景 开发时可能同时进行多个项目,而这些项目所依赖的node版本又不是一样的.比如我现在的angular项目采用的node是8.9.3版本,而vue项目的vue-cli则依赖更高.由于ang ...

  2. SQL Server ->> PARSE函数

    这个函数和TRY_PARSE一起从SQL Server 2012引入.它的存在是因为TRY_PARSE一旦遇到无法成功转换就会以NULL值返回,而如果你希望以报错的形式,你就可以用PARSE. 比如 ...

  3. 一个老IT产品管理者对于产品经理工作的经验总结

    一个老IT产品管理者对于产品经理工作的经验总结 1. 任何行业,包括IT行业,所谓产品管理.产品经理,其核心应该是企业产品管理制度,也就是说,只有企业存在相应的.合理的产品管理体系和制度,产品管理.产 ...

  4. 【海龟汤策略】反趋势交易策略源代码分享(基于BOTVS)

    策略介绍: 海龟之汤,简称“龟汤”,是个与海龟交易法则相反的交易策略,它利用了跟势交易(特别是海龟方式)在很多假突破方面的缺陷来获利(把海龟做成汤吃掉).上世纪八十年代早期,有个非常著名的交易员团体— ...

  5. 数据库JDBC的基本内容

    JDBC 基本流程 首先向项目中导入jar包 创建如下代码 Class.forName("com.mysql.jdbc.Driver"); String url = "j ...

  6. Oracle拆分字符串,字符串分割的函数。

    第一种:oracle字符串分割和提取 分割 create or replace function Get_StrArrayLength ( av_str varchar2, --要分割的字符串 av_ ...

  7. hdu-2619 Love you Ten thousand years

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=2619 题目大意: 求出小于n的数的个数,满足ki mod n,1≤i≤n是模n的完全剩余系 解题思路 ...

  8. The Binder Architecture

    The Binder Architecture is a declarative architecture for iOS development inspired by MVVM and VIPER ...

  9. Gluon.vision的几类数据集

    http://mxnet.apache.org/api/python/gluon/data.html import mxnet as mx from mxnet import nd,autograd, ...

  10. Windows与kali双系统安装启动项的选择问题

    在安装kali的时候,选择了用linux的grub启动,但是在重启后发现启动项里已经没有Windows系统可以选择了. 网上资料说,进入kali的终端,输入以下命令: $ sudo update-gr ...