陣營路由器和嵌套佈局

Question

我有以下途徑

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

問題：

當我訪問 「/」，AuthenticatedLayout和Dashboard不會出現。

1. 我該如何解決這個問題？

2. 是react-router應該這樣使用？

編輯：

我試圖改變<Route path="dashboard" component={Dashboard} />到<IndexRoute component={Dashboard} />。同樣的結果。

Answer 1

如果您希望Dashboard默認顯示，您應該將Dashboard添加爲IndexRoute而不是爲其指定路徑。如果您希望/dashboard也指向Dashboard，您可以使用Redirect。

Answer 2

我解決了這個問題有以下路線：

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