react嵌套路由实现TabBar的实现
有两种页面,一种是有TabBar的页面,如下图; 一种是无TabBar的页面
有TabBar的页面使用嵌套路由来实现
嵌套路由:路由内部包含路由
使用步骤
1 在pages文件夹创建News/index.js组件(子路由要展示的内容)
import React from "react" export default class News extends React.Component{ render(){ return <div style={{background:'yellow',padding:10}}> 这是news组件的内容,是子路由的内容</div> } }
2 在Home组件中,添加一个Route作为子路由(嵌套路由)的出口
3 设置嵌套路由的path,格式以父路由path开头(父组件展示、子组件才会展示)
Home/index.js
import React from "react" //导入路由 import {Route} from "react-router-dom" //导入News组件 import News from "../News/index" export default class Home extends React.Component { render() { return <div style={{background:'skyblue',padding:10}}> 首页页面 {/*渲染子路由*/} <Route path="/home/news" component={News}></Route> </div> } }
父路由的path是"/home"
子路由的path是"/home/news"
效果
地址栏路径的pathname为父路由
修改地址栏路径的pathname为子路由
备注:蓝色部分就是父路由Home,黄色部分就是子路由news (父路由嵌套着子路由)
到此这篇关于react嵌套路由实现TabBar的实现的文章就介绍到这了,更多相关react嵌套路由实现TabBar内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!
相关推荐
-
React Native中TabBarIOS的简单使用方法示例
前言 大家应该都知道,TabBarIOS是RN中自带的组件,可直接使用,不用引用第三方组件,下面讲解TabBarIOS的使用方法,话不多说了,来一起看看详细的介绍吧. 首先看一下效果图,如下图所示: 效果图 看完效果图再对代码进行说明. import React, { Component } from 'react'; import { StyleSheet, View, TabBarIOS, NavigatorIOS, Navigator, AppRegistry, Image, Toucha
-
react嵌套路由实现TabBar的实现
有两种页面,一种是有TabBar的页面,如下图; 一种是无TabBar的页面 有TabBar的页面使用嵌套路由来实现 嵌套路由:路由内部包含路由 使用步骤 1 在pages文件夹创建News/index.js组件(子路由要展示的内容) import React from "react" export default class News extends React.Component{ render(){ return <div style={{background:'yello
-
react-router-dom 嵌套路由的实现
入口文件index.js: import React from "react" import ReactDOM from "react-dom" import App from "./App.jsx" import "babel-polyfill" const root = document.getElementById("app") if (root !== null) { ReactDOM.render
-
React路由参数传递与嵌套路由的实现详细讲解
目录 1. 页面路由参数传递 1.1 动态路由参数 1.2 search字符串 1.3 页面参数隐式传递 2. 嵌套路由 1. 页面路由参数传递 1.1 动态路由参数 描述: 以“/detail/:id”形式传递的数据,在落地组件中通过this.props.match.params得到. 使用: App.jsx: import React, { Component } from 'react' import { Route, Link, NavLink, Switch, Redirect } f
-
react-router4 嵌套路由的使用方法
react我自己还在摸索学习中,今天正好学习一下react-router4 嵌套路由的使用方法,顺便留着笔记 先直接贴代码 import React from 'react'; import ReactDOM from 'react-dom'; import { HashRouter as Router, Route, Switch} from 'react-router-dom'; import createBrowserHistory from 'history/createBrowserH
-
React利用路由实现登录界面的跳转
上一篇在配置好了webpack和react的环境后,接下来开始写登录界面,以及接下来的跳转到主页的功能. 1.首先看一下总体的目录结构. 因为很多时候在看别人写的例子的时候因为目录结构不熟悉后边会出现意想不到的岔子. 2.大体流程: 1)webpack配置入口文件src/index.js 2)运行index.html后首先加载入口文件src/index.js 3)加载路由表src/router/index.js 4)根据路由表中的配置会首先加载登录界面src/login.js 5)当在登录界面登
-
react-router-domV6版本的路由和嵌套路由写法详解
目录 1-单级路由 2-嵌套路由(about路径进行嵌套) ReactRouterv6使用路由嵌套和重定向 1 - 单级路由 <NavLink to="/home">Home</NavLink> <NavLink to="/about">about</NavLink> <Routes> <Route path='/home' element={<Home/>}/> <R
-
react-router-domV6嵌套路由实现详解
目录 V6新特性 <Route>的属性变更component/render->element <Link/>使用变动 <Redirect/> 替换为 <Navigate/> <Switch/> 重命名为 <Routes/> 用useNavigate代替useHistory 依赖包大小从20kb减少到8kb,整体体积减少 新钩子useRoutes代替react-router-config 新标签:<Outlet/> V
-
AngularJS ui-router (嵌套路由)实例
我们都知道,如果使用原生路由的话,Angular的视图是通过ng-view这个指令进行加载的.比如这样:<div ng-view></div>.一般,我们都会把这个指令放在index.html这个文件里面,然后,通过控制器来加载相应的模板视图.比如这样: var bookStoreApp = angular.module('bookStoreApp', [ 'ngRoute', 'ngAnimate', 'bookStoreCtrls', ]); bookStoreApp.conf
-
详解angular2实现ng2-router 路由和嵌套路由
实现ng2-router路由,嵌套路由 首先配置angular2的时候router模块已经下载,只需要引入即可 import {RouterModule, Routes} from "@angular/router"; 我们要创建一个嵌套路由,所以需要创建以下文件 index.html app.module.ts app.component.ts home.component.ts list.component.ts list-one.component.ts list-two.com
-
vue-router:嵌套路由的使用方法
模板抽离 我们已经学习过了Vue模板的另外定义形式,使用<template></template>. <!-- 模板抽离出来 --> <template id="home"> <div>首页</div> </template> <template id="news"> <div>新闻</div> </template> 然后js里定义路
随机推荐
- iOS开发之如何给View添加指定位置的边框线详解
- JS简单获取日期相差天数的方法
- 关于脚本调用外部对像和类型库
- 用JavaScript动态建立或增加CSS样式表的实现方法
- javascript中的altKey 和 Event属性大全
- 简介JavaScript中fixed()方法的使用
- 在ASP.NET 2.0中操作数据之二十六:排序自定义分页数据
- JavaScript中实现Map的示例代码
- 深入理解JavaScript系列(28):设计模式之工厂模式详解
- Ruby 中$开头的全局变量、内部变量、隐藏变量介绍
- 为JQuery EasyUI 表单组件增加焦点切换功能的方法
- javascript 网站常用的iframe分割
- linux下统计appche站点IP访问量的shell脚本
- Hibernate的Annotation版Hello world实例
- Android中init.rc文件的解析 分享
- C++中的vector容器对象学习笔记
- Django基于ORM操作数据库的方法详解
- Python numpy中矩阵的基本用法汇总
- VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
- 微信小程序网络请求封装示例