CODEWITHSUNDEEP
javascriptreactjsreact-router
jukka.aalto
jukka.aalto

Reputation: 81

React router and nested layouts

I have the following routes

import React from 'react'
import { IndexRoute, Route } from 'react-router'
import RootComponent from './containers/RootComponent'
import BaseLayout from './components/BaseLayout'
import AuthenticatedLayout from './components/AuthenticatedLayout'
import Auth from './containers/Auth'
import Dashboard from './containers/Dashboard'
import Inbox from './containers/Inbox'
import Schedule from './containers/Schedule'

export default (
  <Route path='/' component={BaseLayout}>
    <Route path='auth' component={Auth} />
    <Route component={AuthenticatedLayout}>
      <Route path="dashboard" component={Dashboard} />
      <Route path='Inbox' component={Inbox} />
    </Route>
  </Route>
)

Questions:

When I visit "/", AuthenticatedLayout and Dashboard doesn't appear.

  1. How can I fix this?

  2. Is react-router supposed to be used like this?

EDIT:

I tried changing <Route path="dashboard" component={Dashboard} /> to <IndexRoute component={Dashboard} />. Same result.

Upvotes: 1

Views: 784

Answers (2)

jukka.aalto
jukka.aalto

Reputation: 81

I solved the problem with the following routes:

import React from 'react'
import { IndexRoute, Route } from 'react-router'
import RootComponent from './containers/RootComponent'
import BaseLayout from './components/BaseLayout'
import AuthenticatedLayout from './components/AuthenticatedLayout'
import Auth from './containers/Auth'
import Dashboard from './containers/Dashboard'
import Inbox from './containers/Inbox'
import Schedule from './containers/Schedule'
import NotFound from './components/NotFound'

export default (
  <Route component={BaseLayout}>
    <Route path='auth' component={Auth} />
    <Route component={AuthenticatedLayout}>
      <Route path='/' component={Dashboard} />
      <Route path='inbox' component={Inbox} />
    </Route>
    <Route path='*' component={NotFound} />
  </Route>
)

Upvotes: 2

lukewestby
lukewestby

Reputation: 1207

If you want Dashboard to appear by default you should add Dashboard in as an IndexRoute instead of assigning it a path. If you would like /dashboard to also direct to Dashboard you can use a Redirect.

Upvotes: 3

Related Questions