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给xcode工程关联pod的实例详解
- 简易 Javascript 调试包 Debug包
- log4net创建系统日志的详细步骤
- JS延时提示框实现方法详解
- python根据时间生成mongodb的ObjectId的方法
- JSP使用Servlet过滤器进行身份验证的方法
- 解决docker数据文件过大导致根磁盘满的问题
- 浏览器图片选择预览、旋转、批量上传的JS代码实现
- js如何判断用户是在PC端和还是移动端访问
- JS中不为人知的五种声明Number的方式简要概述
- 解决JQeury显示内容没有边距内容紧挨着浏览器边线
- Javascript 陷阱 window全局对象
- Android读取本地json文件的方法(解决显示乱码问题)
- 我的论坛源代码(五)
- PHP中copy on write写时复制机制介绍
- Mingw64编译wxWidgets 3.0.2常见错误分析
- Android Bitmap压缩方法的选择详解
- Vue条件循环判断+计算属性+绑定样式v-bind的实例
- python实现递归查找某个路径下所有文件中的中文字符
- 易语言更改编辑框内文字字体的介绍