Ad

Nest Multiple Components On The Same Route

- 1 answer

I have the following routes defined

const routes = (
  <Router history={history}>
    <Route path='/' component={Landing}>
      <Route path='' component={Invitation}/>
      <Route path='signin' component={Signin}/>
    </Route>
    <Route path='*' component={NoMatch}/>
  </Router>
);

I would like that when visiting the root / route, that the Invitation component gets rendered inside the Landing component, but I havent found a way to do this without using a nested route/url

Any ideas?

Ad

Answer

I think the best to achieve it, is to use the IndexRoute, which requires nesting too, but is especially designed for your use-case I think.

const routes = (
  <Router history={history}>
    <Route path='/' component={Landing}>
      <IndexRoute component={Invitation}/>
      <Route path='signin' component={Signin}/>
    </Route>
    <Route path='*' component={NoMatch}/>
  </Router>
);

See documentation: https://github.com/rackt/react-router/blob/1tes.md" >https://github.com/rackt/react-router/blob/1.0.x/docs/guides/basics/IndexRoutes.md

Ad
source: stackoverflow.com
Ad