找不到模块：错误：无法解析模块＆＃39;路由＆＃39;

Question

我跟随Cory House的pluralsight course关于在ES6中构建React。不幸的是，我在前几个步骤中遇到了一个问题，即建立基本组件。

在控制台中，我看到以下错误消息：

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

如果我查看我的开发服务器，我会看到以下内容

   ./src/index.js中的错误

     

警告：[react-router]位置＆＃34; /＆＃34;没有匹配任何路线

然后在下面我看到eslint已经踢出了以下错误：

  

C：\ Projects \ es6react \ src \ index.js（1/0）

     

✖在＆＃39; ./ routes＆＃39;中找不到5：9路线。进口/命名

所以这个应该非常简单。但是，查看我的目录结构，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>
);

目录结构

以防我scripts的{​​{1}}部分：

package.json

Answer 1

您正在使用默认导出，您需要将其导入为默认导出（不带花括号）：

import routes from './routes';

另一方面，您可以使用命名导出并按名称导入它：

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

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

Answer 2

因为您正在从名为export的routes.js文件进行默认导出，并将其作为命名导出导入。

使用此：

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

Answer 3

您已使用＆＃39;导出默认＆＃39;在routes.js中，这意味着要导入它，您需要使用：

从＆＃34; ./ routes＆＃34;;

导入路线

在您的代码中，您使用了{routes}，这些{routes}在没有默认值的情况下导出时会导入。