文档章节

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

y
 yihong酱
发布于 2017/09/05 08:57
字数 168
阅读 8
收藏 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')}来实现页面导航

© 著作权归作者所有

共有 人打赏支持
上一篇: meteor方法
y
粉丝 0
博文 24
码字总数 5279
作品 0
汕头
程序员
私信 提问
react native之Navigation和NavigationIOS

前言 在开发中,我们需要实现多个界面的切换,这时候就需要一个导航控制器来进行各种效果的切换。那么,在React Native中有两个组件能够实现这样的效果:Navigator和NavigatorIOS。 其中Nav...

Chason-洪
2017/09/25
0
0
React Router 使用教程

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

阮一峰
2016/05/25
0
0
React Native App应用架构设计

在上一篇介绍了React Native开发环境搭建,我们已经可以在本地成功运行一个helloword应用了,本节将开始详细分析如何搭建一个React Native App应用架构,并支持完整本地运行预览。 完整代码见...

熊建刚
2017/10/31
0
3
React-router路由实践

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

一个胖子的我
2016/05/20
0
0
react-navigation,刷新你的导航

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

阡陌有客
2017/11/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spak—— sparkCore源码解析之RangePartitioner源码

   分区过程概览 RangePartitioner分区执行原理: 计算总体的数据抽样大小sampleSize,计算规则是:至少每个分区抽取20个数据或者最多1M的数据量。 根据sampleSize和分区数量计算每个分区的...

freeli
8分钟前
0
0
从内部自用到对外服务,配置管理的演进和设计优化实践

本文整理自阿里巴巴中间件技术专家彦林在中国开源年会上的分享,通过此文,您将了解到: 微服务给配置管理所带来的变化 配置管理演进过程中的设计思考 配置管理开源后的新探索 配置中心控制台...

阿里云官方博客
9分钟前
0
0
MySQL用户管理,常用MySQL语句、MySQL数据库备份恢复

12月6日任务 13.4 mysql用户管理 13.5 常用sql语句 13.6 mysql数据库备份恢复 13.4 mysql用户管理 grant all on *.* to 'user1' identified by 'passwd'; grant SELECT,UPDATE,INSERT on db......

zgxlinux
10分钟前
1
0
Spring异常之Druid – unregister mbean error

Spring异常之Druid – unregister mbean error 2017年04月19日 12:13:42 Dr.Zhu 阅读数:6688 版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zt_fucker/arti...

linjin200
16分钟前
1
0
微信小程序webview问题

今天在改小程序的时候在使用webview的时候切换webview的地址行为,出现了诡异的情况。 默认querystring里会有多个?符号,使用的时候被微信给截取了,导致程序找不到改页面。 而且querystri...

钟元OSS
19分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部