react-router 4.0版本使用笔记

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 }

时间: 2024-12-19 21:09:36

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

react router 4.0以上的路由应用

thead>tr>th{padding:8px;line-height:1.4285714;border-top:1px solid #ddd}.table>thead>tr>td,.table>tbody>tr>th,.table>tbody>tr>td,.table>tfoot>tr>th,.table>tfoot>tr>td{padding:8px;line-height:1.4285714;ver

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

嵌套路由,从广义上来说,分为两种情况:一种是每个路由到的组件都有共有的内容,这时把共有的内容抽离成一个组件,变化的内容也是一个组件,两种组件组合嵌套,形成一个新的组件.另一种是子路由,路由到的组件内部还有路由. 对于共有的内容,典型的代表就是网页的侧边栏,假设侧边栏在左边,我们点击其中的按钮时,右侧的内容会变化,但不管右侧的内容怎么变化,左侧的侧边栏始终存在.这个侧边栏就是共有内容,如下图所示 这个共有内容要怎么处理? 首先想到的就是把这个功能提取出来,写成一个组件,然后再把这个组件依次应用到其

【共享单车】—— React后台管理系统开发手记:Router 4.0路由实战演练

前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. 一.React Router 4.0核心概念 4.0版本中已不需要路由配置,一切皆组件 react-router:基础路由包 提供了一些router的核心api,包括Router,Route,Switch等 react-router-dom:基于浏览器的路由(包含react-router) 提供了

react native 0.56.0版本在windows下有bug不能正常运行

react native的0.56.0版本在windows下有bug不能正常运行请init 0.55.4的版本 react-native init MyApp --version 0.55.4 注意version前是两个杠 原文地址:https://www.cnblogs.com/fancing/p/9520786.html

[转] React Router 使用教程

你会发现,它不是一个库,也不是一个框架,而是一个庞大的体系.想要发挥它的威力,整个技术栈都要配合它改造.你要学习一整套解决方案,从后端到前端,都是全新的做法. 举例来说,React 不使用 HTML,而使用 JSX .它打算抛弃 DOM,要求开发者不要使用任何 DOM 方法.它甚至还抛弃了 SQL ,自己发明了一套查询语言 GraphQL .当然,这些你都可以不用,React 照样运行,但是就发挥不出它的最大威力. 这样说吧,你只要用了 React,就会发现合理的选择就是,采用它的整个技术栈.

React漫漫学习路之 React Router

React Router 是一个基于 React 之上的强大路由库,它可以让你向应用中快速地添加视图和数据流,同时保持页面与 URL 间的同步. 目前react-router最新版本已经到4.0+,因为新的版本是一次非常大的改动,所以这里直接讨论4.0以上版本. 引用 react-router // React Router 核心 react-router-dom // 用于 DOM 绑定的 React Router react-router-native // 用于 React Native

[Web 前端] React Router v4 入坑指南

cp from : https://www.jianshu.com/p/6a45e2dfc9d9 万恶的根源 距离React Router v4 正式发布也已经过去三个月了,这周把一个React的架子做了升级,之前的路由用的还是v2.7.0版的,所以决定把路由也升级下,正好“尝尝鲜”... 江湖传言,目前官方同时维护 2.x 和 4.x 两个版本.(ヾ(??﹏?)??咦,此刻相信机智如我的你也会发现,ReactRouter v3 去哪儿了?整丢了??巴拉出锅了???敢不敢给我个完美的解释!?)事

编译安装 Centos 7 x64 + tengine.2.0.3 (实测+笔记)

环境: 系统硬件:vmware vsphere (CPU:2*4核,内存2G) 系统版本:CentOS Linux release 7.0.1406 安装步骤: 1.系统环境 1.1 更新系统 [[email protected] ~]# yum update -y 1.2 查看环境 [[email protected] ~]# cat /etc/redhat-release CentOS Linux release 7.0.1406 (Core) [[email protected] ~]#

React v15.5.0更新说明 &amp; v16.0.0更新预告

React今日发布了15.5.0版本,同时这也将是以15开头的最后一个版本,下一次发布,我们将迎来React 16.0.0 在15.5.0这一版本中,主要有以下两处改动: 独立React.PropTypes 在之前的版本之中,我们可以通过React.PropTypes这个API访问React内置的一些类型来检查props,在15.5.0版本中,这一API被独立成了一个新的包 prop-types // 15.4 以前 import React from 'react'; class Compon