在某些路线上隐藏布局

Question

我的App.js里面有下面的代码，下面是我的解释


      <Router>
        <Provider store={store}>
          <Fragment>
            <Switch>
              <Suspense fallback={<Loader />} maxDuration={5000}>


                <Layout> //This is the Layout wrapper
                  <PrivateRoute
                    exact
                    path="/en/account/dashboard"
                    component={Home}
                  />
                  <PrivateRoute
                    exact
                    path="/en/books"
                    component={Books}
                  />
                  <PrivateRoute
                    exact
                    path="/en/account/quiz"
                    component={Quiz}
                  />

                  <PrivateRoute
                    exact
                    path="/en/account/quiz/:slug/result"
                    component={QuizResult}
                  />

                  <PrivateRoute
                    exact
                    path="/en/account/my-books"
                    component={MyBooks}
                  />
                </Layout>


                <PrivateRoute
                  exact
                  path="/en/account/quiz/:slug"
                  component={QuizDetail}
                />
                <PrivateRoute
                  exact
                  path="/en/account/logout"
                  component={Logout}
                />
                <RedirectRoute exact path="/en/register" component={Register} />
                <RedirectRoute exact path="/en/login" component={Login} />
              </Suspense>
              <Route component={NoMatch} />
            </Switch>
          </Fragment>
        </Provider>
      </Router>

我希望布局包装器在我在任何其他路线上时不显示，即。如果我去登录、注册、/en/account/quiz/:slug 或注销布局不应该显示。我怎样才能做到这一点？

Answer 1

你为什么不把你的 Layout 写成高阶组件？

类似于：

Layout.jsx

export default (Component) => (
  <Layout>
    <Component />
  </Layout>
)

然后在您的路由器中执行：

<PrivateRoute
  path="/en/account/dashboard"
  component={Layout(Home)}
/>

这样Layout只会显示在您想要的路线中。

在某些路线上隐藏布局

Hide Layout on certain routes

reactjs

layout

react-router-v4