react 路由跳转问题
1.采用Link方法跳转
<Link to="/Index2" >
不要用link,回不来,也不能next
</Link>
2.用context控制路由跳转:
通过添加一个点击事件:绑定一个函数
usb(event){
const path='/Index2';
this.context.router.push(
{
pathname:path
});
}
然后在export之前添加以下代码,此处必须
Content_ship.contextTypes={
router:React.PropTypes.object
}
Content_ship为必须,Content_ship为当前页面封装的组件
usb(event){
const path='/Index2';
this.context.router.push(
{
pathname:path
});
}
react 路由跳转问题的更多相关文章
- 「实践篇」解决微前端 single-spa 项目中 Vue 和 React 路由跳转问题
前言 本文介绍的是在做微前端 single-spa 项目过程中,遇到的 Vue 子应用和 React 子应用互相跳转路由时遇到的问题. 项目情况:single-spa 项目,基座用的是 React,目 ...
- vue 和 react 路由跳转和传参
react 1 .跳转方式加传参 this.props.history.push({ //地址 pathname: '/film/Details', //路由传参 ...
- 解决React路由跳转时出现的红色警告: Warning: Failed prop type: Invalid prop `component` of type `object` supplied to `Route`, expected `function`.
一.报警如图: 二.查找路由版本 我使用路由版本是4.3.1的,然后我测试所有4.0+版本都会出现以上警告. 三.未解决前的代码 三.我又解读了一下报警告内容的大致意思:就是props需要通过函数返回 ...
- react项目中引入了redux后js控制路由跳转方案
如果你的项目中并没有用到redux,那本文你可以忽略 问题引入 纯粹的单页面react应用中,通过this.props.history.push('/list')就可以进行路由跳转,但是加上了redu ...
- react第十四单元(react路由-react路由的跳转以及路由信息)
第十四单元(react路由-react路由的跳转以及路由信息) #课程目标 理解前端单页面应用与多页面应用的优缺点 理解react路由是前端单页面应用的核心 会使用react路由配置前端单页面应用框架 ...
- react第十三单元(react路由-react路由的跳转以及路由信息) #课程目标
第十三单元(react路由-react路由的跳转以及路由信息) #课程目标 熟悉掌握路由的配置 熟悉掌握跳转路由的方式 熟悉掌握路由跳转传参的方式 可以根据对其的理解封装一个类似Vue的router- ...
- 【React踩坑记二】react项目实现JS路由跳转
这里使用的是4.31版本的react-router-dom "react-router-dom": "^4.3.1", 直接使用以下代码即可实现路由跳转 thi ...
- react中路由跳转push与replace的区别
路由跳转,replace / push 区别 push: a-b-c 可以回到上一级 例: this.props.history.push('路由地址') replace: a-b-c 回不到上一级 ...
- React native路由跳转navigate、push、replace的区别
由于没有系统的去学习RN,对路由跳转了解不多,只是跟着项目在做,抽点时间简单学习一下RN路由跳转方法区别,总结如下: 如上图,外部是一个栈容器,此时A页面在最底部,navigate到B页面,为什么此时 ...
随机推荐
- [Java] 各种流的分类及区别
https://www.cnblogs.com/lca1826/p/6427177.html 流在Java中是指计算中流动的缓冲区. 从外部设备流向中央处理器的数据流成为“输入流”,反之成为“输出流” ...
- 放弃Dubbo,选择最流行的Spring Cloud微服务架构实践与经验总结
http://developer.51cto.com/art/201710/554633.htm Spring Cloud 在国内中小型公司能用起来吗?从 2016 年初一直到现在,我们在这条路上已经 ...
- laravel注册行为的方法和逻辑
public function register() { //验证: $this->validate(\request(), [ 'name' => 'required|min:3|uni ...
- bzoj1045
题解: 随便推一下公式 然后发现是中位数 代码: #include<bits/stdc++.h> using namespace std; ],n; long long sum; int ...
- es6-priomise
Promise是异步编程的一种解决方案,它有三种状态,分别是 pending-进行中 resolved-已完成 rejected-已失败 状态一旦改变,就无法再次改变状态,这也是它名字promise- ...
- angular4-事件绑定
事件绑定语法(可以通过 (事件名) 的语法,实现事件绑定) <date-picker (dateChanged)="statement()"></date-pic ...
- box-shadow 边框阴影
box-shadow: 0 0 20px #000 inset;
- 强化学习6-MC与TD的比较-实战
# encoding:utf-8 import numpy as np import matplotlib.pylab as plt ''' 随机行走问题 0 - 1 - 2 - 3 - 4 - 5 ...
- netty pipeline.addLast
pipeline有一个主要的实现类 DefaultChannelPipeline ,addLast顾名思义,就是在处理器链的最后添加一个channelHandler. 代码如下:@Override ...
- Effective Java Methods Common to All Objects
Obey the general contract when overriding equals 先了解equals 和 == 的区别,如果不重写equals, equals比较的仅仅只是是否引用同一 ...