CODEWITHSUNDEEP
javascriptreactjsreact-router
Serenity
Serenity

Reputation: 4064

could not use multiple layout when using react-router

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

Upvotes: 0

Views: 74

Answers (1)

Jyothi Babu Araja
Jyothi Babu Araja

Reputation: 10292

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>

Upvotes: 1

Related Questions