文档章节

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

y
 yihong酱
发布于 2017/09/05 08:57
字数 168
阅读 7
收藏 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 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-navigation,刷新你的导航

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

阡陌有客
2017/11/05
0
0
React-router路由实践

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

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

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Ubuntu18.04 显卡GF-940MX安装NVIDIA-390.77

解决办法: 下面就给大家一个正确的姿势在Ubuntu上安装Nvidia驱动: (a)首先去N卡官网下载自己显卡对应的驱动:www.geforce.cn/drivers (b)下载后好放在英文路径的目录下,怎么简单怎么来...

AI_SKI
今天
0
0
深夜胡思乱想

魔兽世界 最近魔兽世界出了新版本, 周末两天升到了满级,比之前的版本体验好很多,做任务不用抢怪了,不用组队打怪也是共享拾取的。技能简化了很多,哪个亮按哪个。 运维 服务器 产品 之间的...

Firxiao
今天
0
0
MySQL 8 在 Windows 下安装及使用

MySQL 8 带来了全新的体验,比如支持 NoSQL、JSON 等,拥有比 MySQL 5.7 两倍以上的性能提升。本文讲解如何在 Windows 下安装 MySQL 8,以及基本的 MySQL 用法。 下载 下载地址 https://dev....

waylau
今天
0
0
微信第三方平台 access_token is invalid or not latest

微信第三方开发平台code换session_key说的特别容易,但是我一使用就带来无穷无尽的烦恼,搞了一整天也无济于事. 现在记录一下解决问题的过程,方便后来人参考. 我遇到的这个问题搜索了整个网络也...

自由的开源
今天
2
0
openJDK之sun.misc.Unsafe类CAS底层实现

注:这篇文章参考了https://www.cnblogs.com/snowater/p/8303698.html 1.sun.misc.Unsafe中CAS方法 在sun.misc.Unsafe中CAS方法如下: compareAndSwapObject(java.lang.Object arg0, long a......

汉斯-冯-拉特
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部