在某些路线上隐藏 NavBar - React Router V4

Question

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

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

然后创建以下路由组件，将其属性传递给布局：

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

最后，更新您的 App 组件，使其看起来像这样：

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

在某些路线上隐藏 NavBar - React Router V4

Hide NavBar on certain routes - React Router V4

react-router-v4