第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

React 有條件地渲染特定路由中的組件

React 有條件地渲染特定路由中的組件

湖上湖 2023-07-14 16:31:01
這是我的Index.jsReactDOM.render(   <React.StrictMode>        <Provider store={store}>            <Router>               <App className="app-main" />            </Router>         </Provider>    </React.StrictMode>,  document.getElementById('root'));這是App.jsx<Switch>     appRoutes.map(route =>          <Route path={route.path} component={route.component} key={route.key}/>     )}</Switch><BottomNav />我想在特定路線中渲染BottomNav組件,其中它們也是一些子路線。我在底部導(dǎo)航中使用了withRouter,但它的匹配只是一個“/”,我只能訪問位置。位置對我來說還不夠,因為正如我所說,這些路線中有一些子路線。例如,在個人資料路線中,我有活動和朋友。我想在個人資料/朋友中渲染 BottomNav,但不在個人資料/活動中渲染 BottomNav,我怎樣才能實現(xiàn)這一點。我的解決方案是在 redux 中設(shè)置當前路由路徑并將其傳遞到底部導(dǎo)航,并檢查它是否在我渲染底部導(dǎo)航的有效路由中,但我無法在不同視圖中編寫和重復(fù)一個函數(shù),直到它們安裝時更新 redux 中的當前路由。我忘了說我是 React 新手,請溫柔一點并詳細解釋一下 tnx :)
查看完整描述

1 回答

?
縹緲止盈

TA貢獻2041條經(jīng)驗 獲得超4個贊

我沒有測試過,只是從我的腦海中提出來。這個想法是您創(chuàng)建一個應(yīng)該顯示 BottomNav 的路線圖。否則,只需返回 null。


import {withRouter} from 'react-router-dom'


const ROUTES_WITH_BOTTOM_NAV = {

   '/home': true,

   '/profile/friends': true

}


const BottomNav = (props) => {

   const currentPage = props.location.pathname;

   if (!ROUTES_WITH_BOTTOM_NAV[currentPage]) return null;


   return (...yourBottomNavJsx)

}


export const withRouter(BottomNav)

讓我知道這是否有幫助。


查看完整回答
反對 回復(fù) 2023-07-14
  • 1 回答
  • 0 關(guān)注
  • 118 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號