模块未找到错误：错误：无法解析模块“routes”。

Question

我正在跟随Cory House的pluralsight课程，学习使用ES6构建React。不幸的是，在设置基础组件的一些初始步骤上卡住了。

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

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

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

错误 ./src/index.js

警告：[react-router] 地址“/”没有匹配任何路由

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

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

✖ 5:9 在'./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"
  },

- NealR

Answer 1

你正在使用默认导出方式，你需要将其作为默认值导入(不要用花括号)。

import routes from './routes';

另一方面，您可以使用命名导出并通过名称进行导入：

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

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

- madox2

Answer 2

你在routes.js中使用了“export default”，这意味着要导入它，你需要使用：

import routes from "./routes";

在你的代码中你使用了{routes}，这是在不使用默认导出时进行导入的。

- shtanton

Answer 3

由于您正在从名为routes.js的文件中进行默认导出而不是命名导出，并将其作为命名导出进行导入。

请使用以下内容：

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

- Mayank Shukla