react-router版本 v4.x

跟着官网 https://reacttraining.com/react-router/ 上的example学习的

使用

<Router>
<header>
<ul>
<li><Link to='/home'>Home</Link</li>
<li><Link to='/about'>About</Link</li>
<li><Link to='/login'>Login</Link</li>
<li><Link to='/register'>Register</Link</li>
</ul>
</header>
<section>
<Route path='/home' component={Home}/>
<Route path='/about' component={About}/>
<Route path='/login' component={Login}/>
<Route path='/register' component={Register}/>
</section>
<footer>
balabalabala...
</footer>
</Router>

说明:当点击Link的时候,对应到Route里就显示对应的组件,section里的Route是替换的实现,也就是说,当点击/home的时候,页面section部分就只显示Home组件的内容

传值

假如,点击List里的项,要传ID到Detail里,这时候就可以用下面的方法来实现

<Route path='/detail/:id' render={(match) => (<Detail xxId={match.params.id}/>)}/>

Detail.jsx

class Detail extends React.Component 大专栏  react-router简单使用方法 class="p">{
render() {
console.log(this.props.xxId); //可以输出List里点击传过来的值
return (<div></div>)
}
}

在V4里只能通过路由地址传值了,想传更多的值,可以借用localStorage来传

非Link跳转

import {withRouter} from 'react-router-dom';

class ComponentA extends React.Component {
//...
_clickHandler() {
this.props.history.push('/login');
}
} export default withRouter(ComponentA);

路由返回

<div onClick={()=>this.props.history.goBack()}>返回</div>

v2,v3里的跳转,返回和传值

跟v4里有些不同,下面是v2,v3里的写法

import {withRouter} from 'react-router';

class ComponentA extends React.Component {
//...
_clickHandler() {
this.context.router.push('/login')
}
_goBackHandler() {
this.context.router.goBack();
}
} ComponentA.contextTypes = {
router: PropTypes.object.isRequired
}; export default withRouter(ComponentA);

从路由中取值:

//路由定义
<Route path='/article/:id' component={Detail}/> //在Detail组件里取值
const {id} = this.props.params;

问题

当从List点击去到Detail里之后,再点击浏览器的返回按钮,List组件的状态就没有了,还不知道是什么原因

补充:这个问题可以通过React-Router(v2,v3)+React-Router-Scroll来解决,详见博客:https://tomoya92.github.io/2017/09/06/reactjs-router-scroll/

原文链接: https://chenyongze.github.io/2017/03/08/react-router-demo/

react-router简单使用方法的更多相关文章

  1. React Router简单Demo

    简介 react router是使用react的时候首选的一个路由工具. 安装 react router包含react-router,react-router-dom和react-router-nat ...

  2. React Router v4 页面传值的三种方法

    传值方法 1.props.params 使用React router定义路由时,我们可以给指定一个path,然后指定通配符可以携带参数到指定的path: <Route path='/user/: ...

  3. React Router基础使用

    React是个技术栈,单单使用React很难构建复杂的Web应用程序,很多情况下我们需要引入其他相关的技术 React Router是React的路由库,保持相关页面部件与URL间的同步 下面就来简单 ...

  4. 关于react router 4 的小实践

    详细代码栗子:https://github.com/wayaha/react-dom-CY clone然后 npm install npm start 分割线 1.这个项目使用create-react ...

  5. React Router 4.x 开发,这些雷区我们都帮你踩过了

    前言 在前端框架层出不穷的今天,React 以其虚拟 DOM .组件化开发思想等特性迅速占据了主流位置,成为前端开发工程师热衷的 Javascript 库.作为 React 体系中的重要组成部分:Re ...

  6. React router动态加载组件-适配器模式的应用

    前言 本文讲述怎么实现动态加载组件,并借此阐述适配器模式. 一.普通路由例子 import Center from 'page/center'; import Data from 'page/data ...

  7. React Router API文档

    React Router API文档 一.<BrowserRouter> 使用HTML5历史记录API(pushState,replaceState和popstate事件)的<Rou ...

  8. React Router 用法

    React Router 用法 一.DEMO import React from "react"; import { HashRouter as Router, Route, Li ...

  9. React Router基础教程

    React是个技术栈,单单使用React很难构建复杂的Web应用程序,很多情况下我们需要引入其他相关的技术 React Router是React的路由库,保持相关页面部件与URL间的同步 下面就来简单 ...

  10. [Web 前端] 你不知道的 React Router 4

    cp from https://segmentfault.com/a/1190000010718620 几个月前,React Router 4 发布,我能清晰地感觉到来自 Twitter 大家对新版本 ...

随机推荐

  1. iTOP-4412开发板-can测试工具使用文档

    本文档介绍如何使用 can 工具测试 can. 给用户提供了“can_libs.rar”以及“can_tools.zip”压缩包,分别是 can 工具需要的库 文件和 can 工具二进制文件. 注意开 ...

  2. Tidb go mac 上开发环境搭建

    1.安装golang 运行环境 2.安装lite ide 工具 3.安装dep 包管理工具 4.安装delve debuger 调试工具 我用的是mac hight sierra 10.13 版, 会 ...

  3. Android之布局androidmanifest.xml 资源清单 概述

    转载:https://www.cnblogs.com/wytings/p/4083463.html AndroidManifest.xml配置文件对于Android应用开发来说是比较细但又很重要的基础 ...

  4. Mongo学习记录

    引子 最近做项目利用mongo记录的日志做数据统计.着了非关系型数据库的迷,于是乎买了本<MongoDB实战>学习了一番.记录一下学习笔记,共享之. 准备 我在自己的Linux服务器上装了 ...

  5. iTOP-iMX6UL开发板-动态调频技术文档分享

    本文档以 iMX6UL 为例,简单介绍 cpufreq 的 5 种模式. 在 imx6ul 的 menuconfig 中,进入 CPU Power Management ---> CPU Fre ...

  6. C - The Battle of Chibi HDU - 5542 (树状数组+离散化)

    Cao Cao made up a big army and was going to invade the whole South China. Yu Zhou was worried about ...

  7. mysql之存储过程(一)

    今天开发一个需求,需要在一个旧表中增加一列并且对已经的表中记录初始化新列的值, 由于是一次性的工作,故写了个存储过程来代替代码程序初始化 创建及执行过程记录如下: MySQL [XXX_YYY]> ...

  8. Sam format

    reference:https://davetang.org/wiki/tiki-index.php?page=SAM @SQ SN:contig1 LN:9401 (序列ID及长度) 参考序列名,这 ...

  9. 动态指定log4net日志文件名称

    如果是希望日志文件按常见的日期格式动态命名,没什么好说的,直接修改app.config <param name="DatePattern" value="yyyyM ...

  10. CentOS 配置国内源

    阿里云Linux安装镜像源地址:http://mirrors.aliyun.com/ CentOS系统更换软件安装源 第一步 备份你的原镜像文件,以免出错后可以恢复. mv /etc/yum.repo ...