react router如何使用Javascript对象配置索引路由

Question

我尝试了以下操作，但它不起作用：

const routeConfig = [
            {
                // path: '/',
                component: MyApp,
                indexRoute: {component: Homepage},
                childRoutes: routes
            }
        ];
        React.render(<Router history={history} routes={routeConfig} />, document.getElementById('content'));

"主页"组件被完全忽略！

我使用的是react路由器1.0.0和react 0.13.3

Answer 1

首先，最好的方法是升级到1.0最终版本（没有突破性的更改，只有错误修复）

请参阅下面关于如何使用IndexRoute:的普通路由的示例

import React from 'react'
import { render } from 'react-dom';
import createBrowserHistory from 'history/lib/createBrowserHistory'
import { Router } from 'react-router'
const Home = () =>
  <h3>Home</h3>
const App = (props) =>
  <div>
    <h1>App</h1>
    <Navigation />
    {props.children}
  </div>
const routes = [
  {
      path: '/',
      component: App,
      indexRoute: {
        component: Home
      }
  }
]
const Root = () =>
  <Router history={createBrowserHistory()} routes={routes} />

render(<Root />, document.getElementById('root'));

编辑：我在这里为您创建了一个示例。克隆repo时，导航到plain-routes示例和npm install && npm start。