網(wǎng)站首頁(yè) 編程語(yǔ)言正文

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

作者：梨輕巧 ? 更新時(shí)間： 2022-09-29 編程語(yǔ)言

?有兩種頁(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開(kāi)頭(父組件展示、子組件才會(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"