react-router简单使用方法
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简单使用方法的更多相关文章
- React Router简单Demo
简介 react router是使用react的时候首选的一个路由工具. 安装 react router包含react-router,react-router-dom和react-router-nat ...
- React Router v4 页面传值的三种方法
传值方法 1.props.params 使用React router定义路由时,我们可以给指定一个path,然后指定通配符可以携带参数到指定的path: <Route path='/user/: ...
- React Router基础使用
React是个技术栈,单单使用React很难构建复杂的Web应用程序,很多情况下我们需要引入其他相关的技术 React Router是React的路由库,保持相关页面部件与URL间的同步 下面就来简单 ...
- 关于react router 4 的小实践
详细代码栗子:https://github.com/wayaha/react-dom-CY clone然后 npm install npm start 分割线 1.这个项目使用create-react ...
- React Router 4.x 开发,这些雷区我们都帮你踩过了
前言 在前端框架层出不穷的今天,React 以其虚拟 DOM .组件化开发思想等特性迅速占据了主流位置,成为前端开发工程师热衷的 Javascript 库.作为 React 体系中的重要组成部分:Re ...
- React router动态加载组件-适配器模式的应用
前言 本文讲述怎么实现动态加载组件,并借此阐述适配器模式. 一.普通路由例子 import Center from 'page/center'; import Data from 'page/data ...
- React Router API文档
React Router API文档 一.<BrowserRouter> 使用HTML5历史记录API(pushState,replaceState和popstate事件)的<Rou ...
- React Router 用法
React Router 用法 一.DEMO import React from "react"; import { HashRouter as Router, Route, Li ...
- React Router基础教程
React是个技术栈,单单使用React很难构建复杂的Web应用程序,很多情况下我们需要引入其他相关的技术 React Router是React的路由库,保持相关页面部件与URL间的同步 下面就来简单 ...
- [Web 前端] 你不知道的 React Router 4
cp from https://segmentfault.com/a/1190000010718620 几个月前,React Router 4 发布,我能清晰地感觉到来自 Twitter 大家对新版本 ...
随机推荐
- iTOP-4412开发板-can测试工具使用文档
本文档介绍如何使用 can 工具测试 can. 给用户提供了“can_libs.rar”以及“can_tools.zip”压缩包,分别是 can 工具需要的库 文件和 can 工具二进制文件. 注意开 ...
- Tidb go mac 上开发环境搭建
1.安装golang 运行环境 2.安装lite ide 工具 3.安装dep 包管理工具 4.安装delve debuger 调试工具 我用的是mac hight sierra 10.13 版, 会 ...
- Android之布局androidmanifest.xml 资源清单 概述
转载:https://www.cnblogs.com/wytings/p/4083463.html AndroidManifest.xml配置文件对于Android应用开发来说是比较细但又很重要的基础 ...
- Mongo学习记录
引子 最近做项目利用mongo记录的日志做数据统计.着了非关系型数据库的迷,于是乎买了本<MongoDB实战>学习了一番.记录一下学习笔记,共享之. 准备 我在自己的Linux服务器上装了 ...
- iTOP-iMX6UL开发板-动态调频技术文档分享
本文档以 iMX6UL 为例,简单介绍 cpufreq 的 5 种模式. 在 imx6ul 的 menuconfig 中,进入 CPU Power Management ---> CPU Fre ...
- 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 ...
- mysql之存储过程(一)
今天开发一个需求,需要在一个旧表中增加一列并且对已经的表中记录初始化新列的值, 由于是一次性的工作,故写了个存储过程来代替代码程序初始化 创建及执行过程记录如下: MySQL [XXX_YYY]> ...
- Sam format
reference:https://davetang.org/wiki/tiki-index.php?page=SAM @SQ SN:contig1 LN:9401 (序列ID及长度) 参考序列名,这 ...
- 动态指定log4net日志文件名称
如果是希望日志文件按常见的日期格式动态命名,没什么好说的,直接修改app.config <param name="DatePattern" value="yyyyM ...
- CentOS 配置国内源
阿里云Linux安装镜像源地址:http://mirrors.aliyun.com/ CentOS系统更换软件安装源 第一步 备份你的原镜像文件,以免出错后可以恢复. mv /etc/yum.repo ...