CODEWITHSUNDEEP
javascriptreactjsreact-router
realtebo
realtebo

Reputation: 25691

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

This is my code

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;

When running in the browser, I got a blank page and the following example in the javascript console:

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

These my dependencies:

"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"
  },

Why is not a duplicated question: because other SO question was resolved migrating to react-router v3, and I'm already at this version, or importing IndexRoute instead of indexroute or similar, but I've no this typo in my code; also, I've not problem about replacing browserhistory with hashHistory because I'm already using it; also, the 99% of SO question on this topic is using declarative syntax, while i'm using js.

Upvotes: 2

Views: 1765

Answers (1)

Davin Tryon
Davin Tryon

Reputation: 67326

Fairly certain this is because the router attribute should be routes:

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

Upvotes: 5

Related Questions