react-router-dom 实现路由跳转

最新推荐文章于 2024-08-19 16:38:10 发布

yangdongnan

最新推荐文章于 2024-08-19 16:38:10 发布

阅读量1w

点赞数

分类专栏： react 文章标签： react-router-dom

本文链接：https://blog.csdn.net/weixin_38644883/article/details/91366125

版权

本文提供了一个使用create-react-app搭建的简单移动应用，演示了如何利用react-router-dom进行路由管理和底部tabbar的页面切换。在App.js中配置了'/和'/views'两个路由，而在Views.js组件中，通过this.props.history.push()方法实现了页面的导航功能。

摘要由CSDN通过智能技术生成

简单的写了一个移动呈现，底部tabbar跳转的demo

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

目录结构

稍微改变一下 create-react-app 创建后的src目录，这里目录和vue相似
在这里插入图片描述

index.js 中不做改变

App.js

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

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>