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

Question

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

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);