想要隐藏 React 应用程序登录页面上的导航栏

Question

我正在使用我的应用程序中的React-Router及更低版本.js 我能够使用条件语句隐藏导航栏，但成功登录后，当我重定向到仪表板组件时，导航栏不会出现在那里。 但是当我进行浏览器刷新时，我可以在仪表板页面上看到导航栏。 我相信因为浏览器刷新开始渲染应用程序，如果不是，它只会渲染下一个组件。

function App() {
return (
<Provider store={store}>
<Router>
<Fragment>
{window.location.pathname==="/login" ? null : <Navbar /> } 
<Route exact path='/' component={Landing} />
<section className="container">
<Alert />
<Switch>
<Route exact path='/register' component={Register} />
<Route exact path='/login' component={Login} />
<PrivateRoute exact path='/dashboard' component={Dashboard} />
<PrivateRoute exact path='/create-profile' component={CreateProfile} />
</Switch>
</section>
</Fragment>
</Router>
</Provider>
);
}

Answer 1

像这样的路由文件

function App() {
return (
<Provider store={store}>
<Router>
<Fragment>
<Navbar />
<Route exact path='/' component={Landing} />
... // your code
</Fragment>
</Router>
</Provider>
);
}

像这样的导航组件

import { withRouter } from "react-router";
function Navbar(props) {
if (props.location.pathname==="/login") {
return false;
}
return (
<div>NAVBAR</div>
);
}
export default withRouter(Navbar);