react-router:位置"/"与任何路由都不匹配

Question

这是我的代码

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

import Home from './components/Home';
import ArtistMain from './components/artists/ArtistMain';


const componentRoutes = {
  component: Home,
  path: "/",
  indexRoute: { component: ArtistMain }, 
  childRoutes: [
    {
      path: "artists/new",
      getComponent(location, cb) {
        System.import('./components/artists/ArtistCreate')
          .then(module => cb(null, module.default));
      }
    },
    {
      path: "artists/:id",
      getComponent(location, cb) {
        System.import('./components/artists/ArtistDetail')
          .then(module => cb(null, module.default));
      }
    },
    {
      path: "artists/:id/edit",
      getComponent(location, cb) {
        System.import('./components/artists/ArtistEdit')
          .then(module => cb(null, module.default));
      }
    }
  ]
};

const Routes = () => {
  return (
    <Router history={hashHistory} router={componentRoutes} />
  );
};

export default Routes;

在浏览器中运行时,我在javascript控制台中得到了一个空白页面和以下示例:

Warning: [react-router] Location "/" did not match any routes

这些我的依赖:

"dependencies": {
    "faker": "^3.1.0",
    "lodash": "^4.17.2",
    "react": "^15.4.1",
    "react-dom": "^15.4.1",
    "react-input-range": "^0.9.2",
    "react-redux": "^4.4.6",
    "react-router": "^3.0.0",
    "redux": "^3.6.0",
    "redux-form": "^6.3.2",
    "redux-thunk": "^2.1.0"
  },

为什么不是一个重复的问题:因为其他SO问题已经解决,迁移到react-router v3,我已经在这个版本,或导入IndexRoute而不是indexroute或类似,但我的代码中没有这个错误; 另外,我没有替换的问题browserhistory,hashHistory因为我已经在使用它; 此外,关于这个主题的99%的SO问题是使用声明性语法,而我正在使用js.

Answer 1

相当肯定这是因为router属性应该是routes:

const Routes = () => {
  return (
    <Router history={hashHistory} routes={componentRoutes} />
  );
};