モジュールが見つかりません：エラー：モジュール 'routes'を解決できません

Question

私はES6でReactをビルドしてCory Houseのpluralsight courseに従っています。残念ながら、私は基本的なコンポーネントを設定する最初のカップルステップの一つに立ち往生しています。私は次のエラーメッセージが表示されるコンソールで

：

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

私は私のdevのサーバーに見れば、私は、次の

ERROR in ./src/index.js

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

を参照してください次に、その下に、私はeslintが追い出されたことを見ます次のエラー：

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

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

だからこのははかなり簡単です。しかし、私のディレクトリ構造を見て、index.jsファイルとroutes.js何も目立たない...約30分後。

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 './components/App'; 
import HomePage from './components/home/HomePage'; 
import AboutPage from './components/about/AboutPage'; 

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

ディレクトリ構造

そして、私のpackage.jsonから念のため私のscriptsセクション：デフォルトのエクスポートを使用している

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

Answer 1

、あなたは（中括弧なし）デフォルトとして、それをインポートする必要があります。一方

import routes from './routes'; 

名前付きエクスポートを使用して名前でインポートすることができます。

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

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

Answer 2

デフォルトのエクスポートをから実行しているため10ファイルは名前付きのエクスポートではなく、名前付きのエクスポートとしてインポートします。

使用この：あなたはroutes.jsでの輸出デフォルト」を使用している

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

Answer 3

、これはあなたが使用する必要があり、それをインポートすることを意味します：「./routes」から

輸入ルートを。

あなたのコードでは、デフォルトなしでエクスポートされたときにインポートする{routes}を使用しています。