Question

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

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

1 个答案: