could not use multiple layout when using react-router

Question

The project i am doing needs two layout, one homepage (which is right now app.js) and another result page. When the form is filled and submitted, the results should be shown in another layout(result layout not app). But when i submit the form, the url gets redirected to /car but the same app layout is shown.

Here is my code

app.js

class App extends Component {
  render() {
    return (
        <div className="container-fluid">
          <Nav
          >
            {this.props.children}
          </Nav>
            <Banner>
              { location.pathname === '/' || location.pathname === '/apartamentos' ||
              location.pathname === '/coche' || location.pathname === '/experiencias' ?
               this.props.children : ''
             }
            </Banner>
            <Destinos />
            <Footer />
          </div>
          );
  }
}

result.js

const Result = (children) => <div>{children}</div>;

car-result.js

class CarResult extends Component {
  render() {
    return (
      <div>
        Car Result here
      </div>
    );
  }
}

routes.js

export default (
  <Route path="/" component={App}>
      <IndexRoute component={Apartamentos} />
      <Route path="coche" component={Coche} />
      <Route path="experiencias" component={Experiencias} />
      <Route path="login" component={Login} />
      <Route component={Result}>
        <Route path="car" component={CarResult} />
      </Route>
  </Route>
);

Jyothi Babu Araja · Accepted Answer · 2016-12-04 14:22:51Z

1

You are keeping result as child of your app

Refactor your routes like this might work for you

export default (
  <Route path="/">
      <Route component={App}>
        <IndexRoute component={Apartamentos} />
        <Route path="coche" component={Coche} />
        <Route path="experiencias" component={Experiencias} />
        <Route path="login" component={Login} />
      </Route>
      <Route component={Result}>
        <Route path="car" component={CarResult} />
      </Route>
  </Route>
);

But my suggestion is to maintain a separate container for Application which contains home and result containers as children which are rendered by routes. As follows

   <Route path="/" component={App}> //App is root Application
      <Route component={Home}> //Home with before login content
        <IndexRoute component={Apartamentos} />
        <Route path="coche" component={Coche} />
        <Route path="experiencias" component={Experiencias} />
        <Route path="login" component={Login} />
      </Route>
      <Route component={Result}> //Result with after login content
        <Route path="car" component={CarResult} />
      </Route>
  </Route>

edited Dec 4, 2016 at 14:22

answered Dec 4, 2016 at 13:23

Jyothi Babu Araja

10.3k3 gold badges33 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Serenity Over a year ago

Thanks for your support. It worked. Can you show a simple idea(just a layout) of separate container you are recommending about?

Jyothi Babu Araja Over a year ago

Actually App.js is to bootstrap your application. Then routes will load appropriate containers to your App. As of now you can go with existing solution. But suggestion is to follow proper design.

Collectives™ on Stack Overflow

could not use multiple layout when using react-router

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related