文档章节

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

没有更多内容

加载失败,请刷新页面

加载更多

驼峰变量名的转换

package com.mmall.test;import java.util.regex.Matcher;import java.util.regex.Pattern;/** * 需求:1. 将字符串 user_name_abc 转换为 userNameAbc * 2. 将字符串 us......

蚂蚁-Declan
26分钟前
3
0
HTTP请求方法

根据HTTP标准,HTTP请求可以使用多种请求方法。 HTTP1.0定义了三种请求方法: GET, POST 和 HEAD方法。 HTTP1.1新增了五种请求方法:OPTIONS, PUT, DELETE, TRACE 和 CONNECT 方法。 序号 方...

踏破铁鞋无觅处
29分钟前
1
0
知识点043-selenium自动化测试网页工具的使用

【摘要】 Selenium是一个主要用于Web应用自动化测试的工具集合。但其作用不仅仅局限于测试领域,还可以用于浏览器行为模拟以及屏幕抓取等,在行业内有着广泛的应用。Selenium支持主流的浏览器...

侠客行之石头
36分钟前
1
0
B250F I219V安装windows server 网卡驱动

https://blog.csdn.net/ryu2003/article/details/50855146

梦想游戏人
36分钟前
1
0
MacOS Install Docker

使用 Homebrew 安装 macOS 我们可以使用 Homebrew 来安装 Docker。 Homebrew 的 Cask 已经支持 Docker for Mac,因此可以很方便的使用 Homebrew Cask 来进行安装: $ brew cask install dock...

Linux就该这么学
36分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部