React 有条件地渲染特定路由中的组件

Question

这是我的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 :)

Answer 1

我没有测试过，只是从我的脑海中提出来。这个想法是您创建一个应该显示 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)

让我知道这是否有帮助。