почему я всегда получаю сообщение об ошибке с реакцией маршрутизатора

Question

каждый раз, когда я запускаю npm start, выдается сообщение об ошибке:

Ошибка: недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов) ) но получил: объект. Скорее всего, вы забыли экспортировать компонент из файла, в котором он определен, или вы перепутали импорт по умолчанию и имена

import React, { Component } from "react";
import {
    Route,
    NavLink,
    HashRouter
  } from "react-router-dom";
  import Home from "./containers/Home";
  import About from "./containers/About";
  import Resume from "./containers/Resume";
 
class Main extends Component {
  render() {
    return (
        <HashRouter>
        <div>
          <h1>Simple SPA</h1>
          <ul className="header">
            <li><NavLink to="/">Home</NavLink></li>
            <li><NavLink to="/about">About</NavLink></li>
            <li><NavLink to="/resume">Resume</NavLink></li>
          </ul>
          <div className="content">
            <Route path="/" component={Home}/>
            <Route path="/about" component={About}/>
            <Route path="/resume" component={Resume}/>
             
          </div>
        </div>
        </HashRouter>
    );
  }
}
 
export default Main;

import React from "react";
import ReactDOM from "react-dom";
import Main from "./Main";
 
ReactDOM.render(
  <Main/>, 
  document.getElementById("root")
);

import React, { Component } from "react";
 
class Home extends Component {
  render() {
    return (
      <div>
        <h2>HELLO</h2>
      </div>
    );
  }
}
 
export default Home;

Answer 1

Привет, это отлично работает здесь. Пожалуйста, проверьте этот пример:

import React, {useState} from 'react';
import {BrowserRouter as Router, HashRouter, Link, NavLink, Route, Switch} from "react-router-dom";

class App extends React.Component {
    render() {
        return (
            <HashRouter>
                <div>
                    <h1>Simple SPA</h1>
                    <ul className="header">
                        <li><NavLink to="/">Home</NavLink></li>
                        <li><NavLink to="/about">About</NavLink></li>
                        <li><NavLink to="/resume">Resume</NavLink></li>
                    </ul>
                    <div className="content">
                        <Route path="/" component={Home}/>
                        <Route path="/about" component={About}/>
                        <Route path="/resume" component={Resume}/>
                    </div>
                </div>
            </HashRouter>
        )
    }
}
export default App;

class Home extends React.Component {
  render() {
    return (
      <div>
        <h2>HELLO</h2>
      </div>
    );
  }
}

class About extends React.Component {
  render() {
    return (
      <div>
        <h2>About</h2>
      </div>
    );
  }
}

class Resume extends React.Component {
  render() {
    return (
      <div>
        <h2>Resume</h2>
      </div>
    );
  }
}