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

Question

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

中找到了这个

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

有效，但有一个问题。我的data-url组件中有一个链接，该链接重定向回到应用程序。但是一旦它重定向回到并登陆到另一条路线/home上，那么导航栏仍然不会显示，并且我已经控制台登录了<Router>组件，并且它没有重新呈现，因此这就是为什么没有显示。

是否有更好的方法来强制进行更新？或如何有条件地渲染导航栏？

Answer 1

如果只希望导航栏显示在/home页上，则必须指定一条路线：

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

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

但是，如果您想在首页上有条件地显示导航栏，则也可以通过将component替换为render

来做到这一点。

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

如果您不知道这些，则必须将路径包装在BrowserRouter中，请访问 React Router

Answer 2

只需在@ahmad-nawaz-khan solution上扩展

您可能仍想从react-router中传递路由器道具

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