react嵌套路由實(shí)現(xiàn)TabBar的實(shí)現(xiàn)
有兩種頁(yè)面,一種是有TabBar的頁(yè)面,如下圖; 一種是無(wú)TabBar的頁(yè)面
有TabBar的頁(yè)面使用嵌套路由來(lái)實(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}}> 首頁(yè)頁(yè)面 {/*渲染子路由*/} <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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
React從react-router路由上做登陸驗(yàn)證控制的方法
本篇文章主要介紹了React從react-router路由上做登陸驗(yàn)證控制的方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2018-05-05react component changing uncontrolled in
這篇文章主要為大家介紹了react component changing uncontrolled input報(bào)錯(cuò)解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12ForwardRef?useImperativeHandle方法demo
這篇文章主要為大家介紹了ForwardRef?useImperativeHandle方法demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03React實(shí)現(xiàn)前端選區(qū)的示例代碼
本文主要介紹了React實(shí)現(xiàn)前端選區(qū)的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05React無(wú)限滾動(dòng)加載列表組件的封裝實(shí)現(xiàn)
無(wú)限下拉加載技術(shù)是用戶在大量成塊的內(nèi)容面前一直滾動(dòng)查看,本文主要介紹了React無(wú)限滾動(dòng)加載列表組件的封裝實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下2023-12-12React報(bào)錯(cuò)之組件不能作為JSX組件使用的解決方法
本文主要介紹了React報(bào)錯(cuò)之組件不能作為JSX組件使用的解決方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07