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，但不在个人资料/活动中渲染我该如何实现。我的解决方案是在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)

让我知道是否有帮助。

React有条件地在特定路径中渲染组件

1 个答案: