如何有条件地在 react-router 中渲染导航栏？答案

【问题标题】：How do I conditionally render a navbar in react-router?如何有条件地在 react-router 中渲染导航栏？
【发布时间】：2020-09-09 21:02:47
【问题描述】：

如何在 React Router 5 中有条件地渲染导航栏？到目前为止，我的 <Router> 中已经有这个了

{window.location.href.includes('data-url') ? null : (
    <CONNECTED_NAV />
)}

这确实有效，但有一个问题。我的data-url 组件中有一个链接，它重定向回应用程序。但是一旦它重定向回来并降落在另一条路线/home 上，导航栏仍然没有显示，我已经登录<Router> 组件并且它没有重新渲染，所以这就是它没有显示的原因。

有没有更好的方法来强制更新？或者如何有条件地渲染一个导航栏？

【问题讨论】：

【解决方案1】：

只是扩展@ahmad-nawaz-khan solution

你可能仍然想从 react-router 中传入路由器道具

<Route exact path="/home" render={(routerProps) => (condition ? <CONNECTED_NAV {...routerProps} /> : null)} />

【讨论】：

【解决方案2】：

如果您希望导航栏仅显示在 /home 页面上，则必须指定路线：

<Route exact path="/home" component={CONNECTED_NAV} />

这样导航栏将仅在 URL 匹配 /home 时可见

但是，如果您想在主页上有条件地显示导航栏，那么您也可以通过将 component 替换为 render 来做到这一点

<Route exact path="/home" render={() => (condition ? <CONNECTED_NAV /> : null)} />

Route 必须被包裹在 BrowserRouter 中如果你不知道这些也许请访问 React Router

【讨论】：