javascript - React 编译失败。找不到模块 : Can't resolve, 如何使用react-router进行编译？

Question

我正在处理我刚刚开始的两个新项目的问题，我已经按照在生产中的另一个项目上的方式对其进行了配置，但出于某种原因，我似乎无法在这里找到该错误。

我已经使用最新版本的 create-react-app 开始了我的 React 项目使用:npx create-react-app myapp由于某种原因，我的应用程序无法在本地编译 react-router-dom .

这是我的 package.json 中的依赖项:

"dependencies": {
    "react": "^16.8.6",
    "react-bootstrap": "^0.32.4",
    "react-dom": "^16.8.6",
    "react-router-dom": "^4.3.1",
    "react-scripts": "3.0.1"

我有一个index.js我正在包装 <App /> 的文件<Router /> 内部的组件我使用 BrowserRouter 导入的组件根据 react-router-dom 指定.

这是我的index.js的内容文件:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter as Router } from 'react-router-dom';

ReactDOM.render(
  <Router>
    <App />
  </Router>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: 
serviceWorker.unregister();

从那里我的<App />组件实现自定义 <Routes />使用 Route 的组件和Switch来自react-router-dom处理我的应用程序的路由需求。

这是我的<App />的内容组件:

import React, { Component } from "react";
import { Link } from "react-router-dom";
import { Navbar } from "react-bootstrap";
import Routes from "./Routes.js";
import "./App.css";

class App extends Component {
  render() {
    return (
      <div className="App container">
        <Navbar fluid collapsOnSelect>
          ...... misc navbar code
        </Navbar>
        <Routes />
      </div>
      );
  }
}

export default App;

这就是我的Routes.js文件的外观以及它如何使用 Route和Switch来自react-router-dom :

import React from "react";
import { Route, Switch } from "react-router-dom";
import Home from "./containers/Home";

export default () => <Switch>
                       <Route path="/" exact component={ Home } />
                     </Switch>;

这是 { Home }我试图在本地提供的组件:

import React, { Component } from "react";
import "./Home.css";

export default class Home extends Component {
  render() {
    return (
      <div className="Home">
        <div className="LandingPage">
          ... random html code
        </div>
      </div>
      );
  }
}

最后出现错误:

你认为这可能是什么问题？？？谢谢!

更新:添加文件层次结构

Answer 1

啊!文件层次结构也是如此。 Routes.js 位于 src 中，因此它在 src/components 中查找，但它不存在。

相反，使其从“../containers/Home”导入Home；，或重组项目，使containers位于src中>.