網站首頁編程語言正文

react嵌套路由實現TabBar的實現_React

作者：梨輕巧 ? 更新時間： 2022-09-29 編程語言

?有兩種頁面,一種是有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"