2017-01-30 137 views
1

这是我的代码反应路由器:位置“/”没有匹配的路由

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或类似内容,但我的代码中没有这种拼写错误;另外,我还没有关于用hashHistory替换browserhistory的问题,因为我已经在使用它;同样,关于这个主题的SO问题的99%使用声明性语法,而我使用js。

回答

5

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

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

你赢了。谢谢......这是我第一次使用这种方式进行路由,并没有注意到这个错字。 – realtebo

+1

1个字符修复!很高兴你得到它的工作:) –

+0

非常感谢,你拯救了我的整个生命:) –