前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >react-router-dom 实现路由跳转

react-router-dom 实现路由跳转

作者头像
yangdongnan
发布2019-06-11 10:33:20
6.3K0
发布2019-06-11 10:33:20
举报
文章被收录于专栏:日常记录
简单的写了一个移动呈现,底部tabbar跳转的demo

简述 demo 使用 create-react-app 直接创建 路由是使用 react-router-dom

目录结构

稍微改变一下 create-react-app 创建后的src目录, 这里目录和vue相似

index.js 中不做改变

App.js

App.js 中 使用 react-router-dom 检测地址 检索 ‘/’ , ‘/views’ 两个路由

代码语言:javascript
复制
import React           from 'react';
import { HashRouter, Route, Redirect} from "react-router-dom";
import './assets/css/App.less';
import Views from './views/Views'

function App() {
  return (
    <div className="App">
      <HashRouter>
        <Route path='/' render={()=>(<Redirect to='/views' />)}></Route>
        <Route path='/views' component={Views}></Route>
      </HashRouter>
    </div>
  );
}

export default App;
Views.js

Views.js 是业务的容器,这个页面实现tabbar的包裹与跳转 react-router-dom 函数式跳转直接使用 this.props.history.push({ }) 参数参考 https://reacttraining.com/react-router/web/api/history

代码语言:javascript
复制
import React, { Component, Fragment } from "react";
import { Route, Redirect }    from 'react-router-dom'

class Views extends Component {
  constructor ( props ) {
    super(props)
    this.state = {}
  }
  
  render () {
    return (
      <Fragment>
        <div className="views">
          <div className="views-container">
            <Route path="/views" render={()=> <Redirect replace to='/views/home' />}></Route>
            <Route path="/views/home" component={require('./page/Home').default}></Route>
            <Route path="/views/category" component={require('./page/Category').default}></Route>
            <Route path="/views/fn" component={require('./page/Fn').default}></Route>
            <Route path="/views/cart" component={require('./page/Cart').default}></Route>
            <Route path="/views/me" component={require('./page/Me').default}></Route>
          </div>
          
          <footer className="footerFixed">
            <button id={'home'} onClick={this.tabbClick}>首页</button>
            <button id={'category'} onClick={this.tabbClick}>分类</button>
            <button id={'fn'} onClick={this.tabbClick}>fn</button>
            <button id={'cart'} onClick={this.tabbClick}>购物车</button>
            <button id={'me'} onClick={this.tabbClick}>我的</button>
          </footer>
        </div>
      </Fragment>
    )
  }
  
  
  tabbClick = ( e ) => {
    e.preventDefault()
    switch ( e.target.id ) {
      case 'home' :
        this.props.history.push({
          pathname: '/views/home'
        });
        break;
      case 'category' :
        this.props.history.push({
          pathname: '/views/category'
        });
        break;
			case 'fn' :
				this.props.history.push({
					pathname: '/views/fn'
				});
				break;
			case 'cart' :
				this.props.history.push({
					pathname: '/views/cart'
				});
				break;
			case 'me' :
				this.props.history.push({
					pathname: '/views/me'
				});
				break;
      default: {
        this.props.history.push({
          pathname: '/views/home'
        })
      }
    }
  }
}

export default Views

demo

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019年06月10日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 简单的写了一个移动呈现,底部tabbar跳转的demo
    • 目录结构
      • App.js
        • Views.js
        相关产品与服务
        容器服务
        腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档