为什么我总是收到带有React Router的错误消息

Posted 2023-02-28

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

答案

嗨，在这里工作正常。请检查以下示例：

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>
    );