react嵌套路由實(shí)現(xiàn)TabBar的實(shí)現(xiàn)

更新時(shí)間：2022年08月04日 09:36:59 作者：梨輕巧

本文主要介紹了react嵌套路由實(shí)現(xiàn)TabBar的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

有兩種頁面,一種是有TabBar的頁面,如下圖; 一種是無TabBar的頁面

有TabBar的頁面使用嵌套路由來實(shí)現(xiàn)

嵌套路由:路由內(nèi)部包含路由

使用步驟

1 在pages文件夾創(chuàng)建News/index.js組件(子路由要展示的內(nèi)容)

import React from "react"
export default class News extends React.Component{
    render(){
        return <div style={{background:'yellow',padding:10}}>
            這是news組件的內(nèi)容,是子路由的內(nèi)容</div>
    }
 
}

2 在Home組件中,添加一個(gè)Route作為子路由(嵌套路由)的出口

3 設(shè)置嵌套路由的path,格式以父路由path開頭(父組件展示、子組件才會(huì)展示)

Home/index.js

import React from "react"
 
//導(dǎo)入路由
import {Route} from "react-router-dom"
//導(dǎo)入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為子路由

備注:藍(lán)色部分就是父路由Home,黃色部分就是子路由news (父路由嵌套著子路由)

到此這篇關(guān)于react嵌套路由實(shí)現(xiàn)TabBar的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)react嵌套路由實(shí)現(xiàn)TabBar內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

react 權(quán)限樹形結(jié)構(gòu)實(shí)現(xiàn)代碼
這篇文章主要介紹了react 權(quán)限樹形結(jié)構(gòu)實(shí)現(xiàn)代碼,項(xiàng)目背景react + ant design,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧
2024-05-05
詳解Ant Design of React的安裝和使用方法
這篇文章主要介紹了詳解Ant Design of React的安裝和使用方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-12-12
在React中實(shí)現(xiàn)Vue的插槽功能的示例代碼
在?Vue?中,插槽（Slots）允許父組件向子組件傳遞?HTML?結(jié)構(gòu),從而實(shí)現(xiàn)更靈活的組件復(fù)用,具名插槽允許父組件向子組件傳遞多個(gè)不同的?HTML?結(jié)構(gòu),在?React?中,我們沒有直接的插槽概念,但可以通過?props.children?和函數(shù)作為?props?來實(shí)現(xiàn)類似的功能
2025-01-01
forwardRef?中React父組件控制子組件的實(shí)現(xiàn)代碼
forwardRef 用于拿到父組件傳入的 ref 屬性，這樣在父組件便能通過 ref 控制子組件，這篇文章主要介紹了forwardRef?-?React父組件控制子組件的實(shí)現(xiàn)代碼,需要的朋友可以參考下
2024-01-01
解決React報(bào)錯(cuò)Invalid hook call
這篇文章主要為大家介紹了React報(bào)錯(cuò)Invalid hook call解決方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12
react國際化react-intl的使用
這篇文章主要介紹了react國際化react-intl的使用,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-05-05
react通過組件拆分實(shí)現(xiàn)購物車界面詳解
這篇文章主要介紹了react通過組件拆分來實(shí)現(xiàn)購物車頁面的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-08-08
React?classnames原理及測試用例
這篇文章主要為大家介紹了React?classnames原理及測試用例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12
深入研究React中setState源碼
這篇文章主要介紹了深入研究React中setState源碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-11-11
React事件處理和表單的綁定詳解
這篇文章主要介紹了React事件處理和表單的綁定，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-08-08