React Не удалось скомпилировать.Модуль не найден: Не удается разрешить, Как скомпилировать с реакции-маршрутизатором?

Question

Я имею дело с проблемой двух новых проектов, которые я только что начал, и у меня настроен так, как у меня в другом, и по какой-то причине я не могу найти ошибку здесь.

Я начал свой реактивный проект с последней версией create-react-app, используя: 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, которого не существует.

Вместо этого сделайте его import Home from "../containers/Home"; или реструктурируйте проект так, чтобы containers был внутри src.

Answer 2

Ваш route.js должен быть

import Home from "../containers/Home";

Вам нужно пройти вверх по одному каталогу, чтобы добраться до того места, где находятся контейнеры. То, как вы его настроили, ищет контейнеры внутри него. Src