react嵌套路由實現TabBar的實現
更新時間：2022年08月04日 09:36:59 作者：梨輕巧
本文主要介紹了react嵌套路由實現TabBar的實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
有兩種頁面,一種是有TabBar的頁面,如下圖; 一種是無TabBar的頁面
有TabBar的頁面使用嵌套路由來實現
嵌套路由:路由內部包含路由
使用步驟
1 在pages文件夾創(chuàng)建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內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
React從react-router路由上做登陸驗證控制的方法
本篇文章主要介紹了React從react-router路由上做登陸驗證控制的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
react component changing uncontrolled in
這篇文章主要為大家介紹了react component changing uncontrolled input報錯解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
react-redux是react官方推出的redux綁定庫，React-Redux 將所有組件分成兩大類一個是UI組件和容器組件，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧2023-01-01
ForwardRef?useImperativeHandle方法demo
這篇文章主要為大家介紹了ForwardRef?useImperativeHandle方法demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
這篇文章主要介紹了React中的聲明式渲染框架,我們先討論了命令式和聲明式這兩種范式的差異，其中命令式更加關注過程，而聲明式更加關注結果，對React渲染框架知識感興趣的朋友跟隨小編一起看看吧2022-06-06
useEffect是React中的一個鉤子函數,用于處理副作用操作,這篇文章主要為大家介紹了React中useEffect函數的具體用法,希望對大家有所幫助2023-08-08
本文主要介紹了React實現前端選區(qū)的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05
無限下拉加載技術是用戶在大量成塊的內容面前一直滾動查看,本文主要介紹了React無限滾動加載列表組件的封裝實現,具有一定的參考價值,感興趣的可以了解一下2023-12-12
本文主要介紹了React報錯之組件不能作為JSX組件使用的解決方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-07-07
這篇文章主要介紹了React中useRef的具體使用，它可以用來獲取組件實例對象或者是DOM對象，除此之外還有哪些用法，就一起來了解一下2021-04-04