react嵌套路由实现TabBar的实现

2024-12-04 12:20:37

有两种页面,一种是有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里定义路

react嵌套路由实现TabBar的实现

相关推荐

随机推荐