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

问题：

当我访问＆＃34; /＆＃34;时，AuthenticatedLayout和Dashboard不会出现。

我该如何解决这个问题？
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>
)

反应路由器和嵌套布局

2 个答案: