How to create multiple layouts in React?

user_14122005 0
Viewed 56

I want to achive something like this: I will not show Header and Footer in my Login page but main layout will reamin the same. Kind of using different layouts between Routes? How can I achieve something like this?

my Code:

<Router history={history}>
        <Header>
            <Switch>
                <Route component={Home} path="/" exact />
                <Route path="/about" component={AboutPage} />
                <Route path="/community" exact />
                <Route path="/login" exact component={LoginPage} />
                <Route path="/signup" exact component={LoginPage} />
                <Route path="/members" component={Members} />
                <Route component={NoMatch} />
            </Switch>
        </Footer>
    </Router>
react-router reactjs router
1 Answers

Easy. Add another Switch at a higher level, and render your login route if matches, else render the remaining routes.

<Router history={history}>
  <Switch>
    <Route path="/login" exact component={LoginPage} />
    <Route>
      <Header />
      <Switch>
        <Route component={Home} path="/" exact />
        <Route path="/about" component={AboutPage} />
        <Route path="/community" exact />
        <Route path="/signup" exact component={LoginPage} />
        <Route path="/members" component={Members} />
        <Route component={NoMatch} />
      </Switch>
      <Footer />
    </Route>
  </Switch>
</Router>
user_18305630
Related