错误：[Header] 不是 组件

尽管我努力修复它们，但我仍然遇到上述错误。终端声称应用程序编译没有问题，但浏览器上没有显示任何内容。我在查看控制台时发现了错误。以下是错误所指的 Header 组件的 index.js 文件：

import React from "react";
import { Route, Navigate, Router } from "react-router-dom";
import Navigation from "../../components/Navigation";
import About from "../../components/About";
import Portfolio from "../../components/Portfolio";
import Contact from '../../components/Contact';
import Resume from '../../components/Resume';

class Header extends React.Component {
  render() {
    return (
      <Router>
        <header>
          <Navigation />
        </header>

        <div className="content">
          <Route exact path="/" render={() => <Navigate to="/about" replace={true}/>} />
          <Route path="/about" component={About} />
          <Route path="/portfolio" component={Portfolio} />
          <Route path="/contact" component={Contact}/>
          <Route path="/resume" component={Resume}/>
        </div>
      </Router>
    );
  }
}

export default Header;

这是 App.js：

import React from 'react';
import Header from './components/Header';
import Footer from './components/Footer';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Routes } from 'react-router-dom';

function App() {
  return (
    <div>
      <Routes>
        <Header />
        <Footer />
      </Routes>
    </div>
  );
}

export default App;

如果需要，我可以提供更多代码。

In react-router-dom版本6Routes组件只能有Route or React.Fragment作为子组件，并且Route组件只能有Routes或其他Route组件作为父组件。Header不是一个Route组件并使不变量失效。

移动Router进入应用程序并渲染Header and Footer而是将组件放入其中，然后将其包裹起来Route组件在Routes.

App

function App() {
  return (
    <div>
      <Router>
        <Header />
        <Footer />
      </Router>
    </div>
  );
}

Header

Fix the Route组件，他们不再使用component or render来渲染路由组件，现在它们使用element渲染的道具ReactElements，即 JSX。

class Header extends React.Component {
  render() {
    return (
      <div>
        <header>
          <Navigation />
        </header>

        <div className="content">
          <Routes>
            <Route path="/" element={<Navigate to="/about" replace />} />
            <Route path="/about" element={<About />} />
            <Route path="/portfolio" element={<Portfolio />} />
            <Route path="/contact" element={<Contact />}/>
            <Route path="/resume" element={<Resume />}/>
          </Routes>
        </div>
      </div>
    );
  }
}

尽管将路线作为页眉和页脚之间的内容移至应用程序中可能更有意义。

function App() {
  return (
    <div>
      <Router>
        <Header />
        <div className="content">
          <Routes>
            <Route path="/" element={<Navigate to="/about" replace />} />
            <Route path="/about" element={<About />} />
            <Route path="/portfolio" element={<Portfolio />} />
            <Route path="/contact" element={<Contact />}/>
            <Route path="/resume" element={<Resume />}/>
          </Routes>
        </div>
        <Footer />
      </Router>
    </div>
  );
}