为什么我总是收到反应路由器的错误消息答案

【问题标题】：why do I always get an error message with react router为什么我总是收到反应路由器的错误消息
【发布时间】：2020-08-18 13:14:15
【问题描述】：

每次我运行 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;

【问题讨论】：

尝试将您的Route 包装到从react-router-dom 导入的Switch 中。 Ref。你也可以发布About 和Resume 组件吗？
能否也显示以下组件About和Resume

标签： reactjs react-router

【解决方案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>
    );
  }
}

【讨论】：