I'm following Cory House's pluralsight course on building React in ES6. Unfortunately I'm stuck on one of the first couple steps, setting up the basic ponents.

In the console I see the following error message:

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

If I look in my dev server I see the following

ERROR in ./src/index.js

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

Then below that I see that eslint has kicked out the following error:

C:\Projects\es6react\src\index.js (1/0)

✖ 5:9 routes not found in './routes' import/named

So this should be pretty straightforward. However, looking at my directory structure, index.js file and routes.js nothing stands out... even after about 30 minutes.

index.js

import 'babel-polyfill';
import React from 'react';
import {render} from 'react-dom';
import {Router, browserHistory} from 'react-router';
import {routes} from './routes';
import './styles/styles.css';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

render(
    <Router history={browserHistory} routes={routes} />,
    document.getElementById('app')
);

routes.js

import React from 'react';
import {Route,IndexRoute} from 'react-router';
import App from './ponents/App';
import HomePage from './ponents/home/HomePage';
import AboutPage from './ponents/about/AboutPage';

export default(
    <Route path="/" ponent={App}>
        <IndexRoute ponent={HomePage} />
        <Route path="about" ponent={AboutPage}/>
    </Route>
);

Directory structure

And just in case my scripts section from my package.json:

  "scripts": {
    "prestart": "babel-node tools/startMessage.js",
    "start": "npm-run-all --parallel open:src lint:watch test:watch",
    "open:src":"babel-node tools/srcServer.js",
    "lint": "node_modules/.bin/esw webpack.config.* src tools",
    "lint:watch": "npm run lint -- --watch",
    "test":"mocha --reporter progress tools/testSetup.js \"src/**/*.test.js\"",
    "test:watch": "npm run test -- --watch"
  },

I'm following Cory House's pluralsight course on building React in ES6. Unfortunately I'm stuck on one of the first couple steps, setting up the basic ponents.

In the console I see the following error message:

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

If I look in my dev server I see the following

ERROR in ./src/index.js

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

Then below that I see that eslint has kicked out the following error:

C:\Projects\es6react\src\index.js (1/0)

✖ 5:9 routes not found in './routes' import/named

So this should be pretty straightforward. However, looking at my directory structure, index.js file and routes.js nothing stands out... even after about 30 minutes.

index.js

import 'babel-polyfill';
import React from 'react';
import {render} from 'react-dom';
import {Router, browserHistory} from 'react-router';
import {routes} from './routes';
import './styles/styles.css';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

render(
    <Router history={browserHistory} routes={routes} />,
    document.getElementById('app')
);

routes.js

import React from 'react';
import {Route,IndexRoute} from 'react-router';
import App from './ponents/App';
import HomePage from './ponents/home/HomePage';
import AboutPage from './ponents/about/AboutPage';

export default(
    <Route path="/" ponent={App}>
        <IndexRoute ponent={HomePage} />
        <Route path="about" ponent={AboutPage}/>
    </Route>
);

Directory structure

And just in case my scripts section from my package.json:

  "scripts": {
    "prestart": "babel-node tools/startMessage.js",
    "start": "npm-run-all --parallel open:src lint:watch test:watch",
    "open:src":"babel-node tools/srcServer.js",
    "lint": "node_modules/.bin/esw webpack.config.* src tools",
    "lint:watch": "npm run lint -- --watch",
    "test":"mocha --reporter progress tools/testSetup.js \"src/**/*.test.js\"",
    "test:watch": "npm run test -- --watch"
  },

• javascript
• node.js
• reactjs
• react-router
• react-redux

3 Answers 3

You are using default export, you need to import it as default (without curly braces):

import routes from './routes';

On the other hand you can use named export and import it by name:

// index.js
export const routes = ...

// routes.js
import {routes} from './routes';

Because you are doing default export from routes.js file not named export, and importing it as named export.

Use this:

import routes from './routes';     //remove {}

You have used 'export default' in routes.js, this means that to import it you need to use:

import routes from "./routes";

In your code you have used {routes} which would import when exported without the default.