亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決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組件,其中它們也是一些子路線。我在底部導航中使用了withRouter,但它的匹配只是一個“/”,我只能訪問位置。位置對我來說還不夠,因為正如我所說,這些路線中有一些子路線。例如,在個人資料路線中,我有活動和朋友。我想在個人資料/朋友中渲染 BottomNav,但不在個人資料/活動中渲染 BottomNav,我怎樣才能實現這一點。我的解決方案是在 redux 中設置當前路由路徑并將其傳遞到底部導航,并檢查它是否在我渲染底部導航的有效路由中,但我無法在不同視圖中編寫和重復一個函數,直到它們安裝時更新 redux 中的當前路由。我忘了說我是 React 新手,請溫柔一點并詳細解釋一下 tnx :)
查看完整描述

1 回答

?
縹緲止盈

TA貢獻2041條經驗 獲得超4個贊

我沒有測試過,只是從我的腦海中提出來。這個想法是您創建一個應該顯示 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)

讓我知道這是否有幫助。


查看完整回答
反對 回復 2023-07-14
  • 1 回答
  • 0 關注
  • 132 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號