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而不是{{ 1}}或类似的，但我的代码中没有这个错字;另外，关于用indexroute替换browserhistory我没有问题，因为我已经在使用它了;另外，关于这个主题的99％的SO问题是使用声明性语法，而我正在使用js。

Answer 1

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

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

react-router：位置“/”与任何路由都不匹配

1 个答案: