找不到模块：错误：无法解析模块“路由”

Posted 2023-02-21

【中文标题】找不到模块：错误：无法解析模块“路由”

【英文标题】：Module not found: Error: Cannot resolve module 'routes'

【发布时间】：2018-01-20 08:51:27

【问题描述】：

我正在关注 Cory House 的 pluralsight course 在 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' 导入/命名中找不到路由

所以这应该非常简单。然而，看看我的目录结构，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"
  ,

【参考方案1】：

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

import routes from './routes';

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

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

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

【参考方案2】：

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

使用这个：

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

【参考方案3】：

您在 routes.js 中使用了“导出默认值”，这意味着要导入它，您需要使用：

从“./routes”导入路由；

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