javascript - React-router引入IndexRoute报错

Question

import React from 'react'
import { Router, Route, IndexRoute, hashHistory } from 'react-router'

import Frame from '../layouts/Frame'
import Home from '../views/Home'
import Detail from '../views/Detail'

const routes = (
    <Router history={hashHistory}>    
        <Route path="/" component={Frame} />
        <IndexRoute component={Home} />
        <Route path="/detail:id" component={Detail} />
    </Router>
)

export default routes

Warning: [react-router] An <IndexRoute> does not make sense at the root of your route config

IndexRoute组件里的Home组件是正常的，单独拿出来也能显示，实在不清楚报错的原因

Answer 1

例子上是这个样子的，你是不是写的结构有问题？

<Router>
  <Route path="/" component={App}>
    <IndexRoute component={Home}/>
    <Route path="accounts" component={Accounts}/>
    <Route path="statements" component={Statements}/>
  </Route>
</Router>

Answer 2

警告：你把IndexRoute放在根路由配置，没有对应任何路径，所以毫无意义。参照如下写法：

const routes = (
    <Router history={hashHistory}>    
        <Route path="/" component={Frame}>
            <IndexRoute component={Home} />
        </Route>
        <Route path="/detail:id" component={Detail} />
    </Router>
)