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

Question

这是我的Index.js

ReactDOM.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 = {&nbsp; &nbsp;'/home': true,&nbsp; &nbsp;'/profile/friends': true}const BottomNav = (props) => {&nbsp; &nbsp;const currentPage = props.location.pathname;&nbsp; &nbsp;if (!ROUTES_WITH_BOTTOM_NAV[currentPage]) return null;&nbsp; &nbsp;return (...yourBottomNavJsx)}export const withRouter(BottomNav)让我知道这是否有帮助。