react-router-v4 - 隐藏某些路线上的导航栏 - React Router V4

Question

我正在使用react-router v4，我想隐藏某些路线上的导航栏。如何隐藏登录页面上的导航栏？我尝试了几种不同的解决方案，但似乎都不起作用。一些见解将不胜感激。

const App = appProps => (
  <Router>
    <ScrollToTop>
      <Container fluid>
        <NavBar {...appProps} />
          <Switch>
            <Route name="landing" path="/landing" component={LandingPage} {...appProps} />
            <Route name="login" path="/login" component={LoginPage} />
          </Switch>
      </Container>
    </ScrollToTop>
  </Router>
);

Answer 1

您应该有一个布局组件，可以根据路由呈现所需的组件。

const AppLayout = (props) => {
    return (
        <ScrollToTop>
            <Container fluid>
                {props.navBar ? React.createElement(props.navBar) : null}
                {props.children}
            </Container>
        </ScrollToTop>
    );
};

然后创建以下路由组件，将其 props 传递到布局:

const AppRoute = ({ component, ...routeProps }) => {
    return (
        <Route {...routeProps} render={(props) => {
            return (
                <AppLayout { ...props} {...routeProps}>
                    {React.createElement(component, props)}
                </AppLayout>
            );
        }} />
    );
};

最后，更新您的应用程序组件，使其看起来像这样:

const App = appProps => (
    <Router>
        <Switch>
            <AppRoute name="landing" path="/landing" navBar={NavBar} component={LandingPage} {...appProps} />
            <AppRoute name="login" path="/login" component={LoginPage} />
        </Switch>
    </Router>
);