文档章节

React 可用于任何组件的路由间导航方法

y
 yihong酱
发布于 2017/09/05 08:57
字数 168
阅读 7
收藏 0
点赞 0
评论 0

可以在这里查看demo

https://blog.logrocket.com/routes-animation-transitions-in-react-router-v4-9f4788deb964

使用react-router-dom路由组件及this.props.history.push('/*')}实现路由间导航

1.在route.js中添加

import App from './containers/App';
import { BrowserRouter as Router } from 'react-router-dom';
import { Route } from 'react-router-dom';


export const renderRoutes = () => (
  <Router >
  <div>
    <Route path="/"  component={App}></Route>

  </div>
  </Router>
)

2.在index.js中添加

import  { renderRoutes } from './routes';
import ReactDOM from 'react-dom';

ReactDOM.render(renderRoutes(), document.getElementById('root'));

3.在app.js中进行布局(用的materialui)

  <Grid container >
    <Grid item  sm={2}>....
        <ListItem button  onClick={()=>this.props.history.push('/cart')}>Cart</ListItem>
  </Grid>
  <Grid item xs={12} sm={10}> 
    <main className={classes.content} >
        <Route path="/products"  component={Products}></Route>
       <Route path="/products/books"  component={BooksContainer}></Route>
       <Route path="/products/music"  component={MusicContainer}></Route>
        <Route path="/cart"  component={CartContainer}></Route>
     </main>
  </Grid>

## 使用this.props.history.push('/cart')}来实现页面导航

© 著作权归作者所有

共有 人打赏支持
y
粉丝 0
博文 24
码字总数 5279
作品 0
汕头
程序员
React Router 使用教程

真正学会 React 是一个漫长的过程。 你会发现,它不是一个库,也不是一个框架,而是一个庞大的体系。想要发挥它的威力,整个技术栈都要配合它改造。你要学习一整套解决方案,从后端到前端,都...

阮一峰 ⋅ 2016/05/25 ⋅ 0

react-navigation,刷新你的导航

在2017年1月,新开源的react-navigation库备受瞩目。它有类似于原生版性能的体验效果,可能会成为未来RN导航组件中的主力军。该库包含三类组件: (1)StackNavigator:用来跳转页面和传递参...

阡陌有客 ⋅ 2017/11/05 ⋅ 0

React-router路由实践

首先,在该项目开始之前,还请大家能够先下载一个项目脚手架。本教程基于该脚手架进行开发 Router,hashHistory,Route 首先下载react-router 需要注意的是,react-router更新很快,API也在持续...

一个胖子的我 ⋅ 2016/05/20 ⋅ 0

React Native系列——Navigator组件的使用介绍

一、介绍 导航组件Navigator可以让我们客户端在不同的页面见进行切换。为了达到这样的功能,Navigator提供了路由对象功能进行区分识别每一个页面。同时我们可以通过renderScene方法,Navaiga...

龙马行空 ⋅ 2016/04/21 ⋅ 5

Redux 最佳实践

摘要 Redux 是 其他 flux 框架 推荐使用的 React 框架。当我开始写这篇文章时,它还是 1.0.0 版本,当这篇文章发布时,它已经是 3.0.0 了。 它的作者,Dan Abramov 已经发布一些很棒的 文档,...

力谱宿云 ⋅ 2016/06/21 ⋅ 1

从navigator到react-navigation进阶教程

随着react-navigation逐渐稳定,Navigator也被光荣的退休了。在React Native生态环境中需要一款可扩展且易于使用的导航组件,Navigator 自然胜任不了,这时React Native社区便孕育出了一个开...

JiaPengHui ⋅ 05/15 ⋅ 0

整合ReactNative和ReactRouter两个组件--react-native-navigator-router

本项目用来整合ReactNative和ReactRouter两个组件。React Native中提供了页面栈管理和导航的组件Navigator,为页面的生命周期管理和页面导航跳转提供了动画容器的支持。React Router提供了为...

匿名 ⋅ 2016/05/27 ⋅ 0

React Router v4 入坑指南

万恶的根源 距离React Router v4 正式发布也已经过去三个月了,这周把一个React的架子做了升级,之前的路由用的还是v2.7.0版的,所以决定把路由也升级下,正好“尝尝鲜”... 江湖传言,目前官...

桂圆_noble ⋅ 2017/07/07 ⋅ 0

React Native 常用组件包

图标包: react-native-vector-icons 2. 脚手架 react-native-ignite 3. 轮播组件 react-native-swiper 4. 滑动Tabbar react-native-scrollable-tab-view 5. 聊天组件 react-native-gifted-......

Hui-Lee ⋅ 2016/08/07 ⋅ 0

聊聊 React Router v4 的设计思想

React Router v4 发布已经有几个月了,但好像并没有得到太多人的青睐,大家(包括我们团队自己)还是习惯使用v2、v3版本。这一方面是因为v4版本是一次破坏性的升级,从v2、v3 升级到v4,必需...

苍山沭河 ⋅ 2017/08/06 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

JVM堆的理解

在JVM中,我们经常提到的就是堆了,堆确实很重要,其实,除了堆之外,还有几个重要的模块,看下图: 大 多数情况下,我们并不需要关心JVM的底层,但是如果了解它的话,对于我们系统调优是非常...

不羁之后 ⋅ 昨天 ⋅ 0

推荐:并发情况下:Java HashMap 形成死循环的原因

在淘宝内网里看到同事发了贴说了一个CPU被100%的线上故障,并且这个事发生了很多次,原因是在Java语言在并发情况下使用HashMap造成Race Condition,从而导致死循环。这个事情我4、5年前也经历...

码代码的小司机 ⋅ 昨天 ⋅ 1

聊聊spring cloud gateway的RetryGatewayFilter

序 本文主要研究一下spring cloud gateway的RetryGatewayFilter GatewayAutoConfiguration spring-cloud-gateway-core-2.0.0.RC2-sources.jar!/org/springframework/cloud/gateway/config/G......

go4it ⋅ 昨天 ⋅ 0

创建新用户和授予MySQL中的权限教程

导读 MySQL是一个开源数据库管理软件,可帮助用户存储,组织和以后检索数据。 它有多种选项来授予特定用户在表和数据库中的细微的权限 - 本教程将简要介绍一些选项。 如何创建新用户 在MySQL...

问题终结者 ⋅ 昨天 ⋅ 0

android -------- 颜色的半透明效果配置

最近有朋友问我 Android 背景颜色的半透明效果配置,我网上看资料,总结了一下, 开发中也是常常遇到的,所以来写篇博客 常用的颜色值格式有: RGB ARGB RRGGBB AARRGGBB 这4种 透明度 透明度...

切切歆语 ⋅ 昨天 ⋅ 0

CentOS开机启动subversion

建立自启动脚本: vim /etc/init.d/subversion 输入如下内容: #!/bin/bash## subversion startup script for the server## chkconfig: 2345 90 10# description: start the subve......

随风而飘 ⋅ 昨天 ⋅ 0

Nginx + uwsgi @ubuntu

uwsgi 安装 sudo apt-get install python3-pip # 注意 ubuntu python3默认没有安装pippython3 -m pip install uwsgi 代码(test.py) def application(env, start_response): start_res......

袁祾 ⋅ 昨天 ⋅ 0

版本控制工具

CSV , SVN , GIT ,VSS

颖伙虫 ⋅ 昨天 ⋅ 0

【2018.06.19学习笔记】【linux高级知识 13.1-13.3】

13.1 设置更改root密码 13.2 连接mysql 13.3 mysql常用命令

lgsxp ⋅ 昨天 ⋅ 0

LVM

LVM: 硬盘划分分区成物理卷->物理卷组成卷组->卷组划分逻辑分区。 1.磁盘分区: fdisk /dev/sdb 划分几个主分区 输入t更改每个分区类型为8e(LVM) 使用partprobe生成分区的文件:如/dev/sd...

ZHENG-JY ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部