javascript - 错误 : [Header] is not a component

Question

尽管我努力修复它们，但我仍然遇到上述错误。终端声称应用程序编译没有问题，但浏览器上没有显示任何内容。我在查看控制台时发现了错误。这是错误所指的 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;

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

Answer 1

在 react-router-dom 版本 6 中，Routes 组件只能有 Route 或 React.Fragment 作为子组件，Route 组件只能有 Routes 或另一个 Route 组件作为父组件。 Header 不是 Route 组件，不符合不变量。

将 Router 移动到应用程序中，并将 Header 和 Footer 组件渲染到其中，然后包装 Route Routes 中的组件。

应用

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

标题

修复 Route 组件，它们不再使用 component 或 render 来渲染路由组件，而是使用 element 属性来呈现 ReactElement，即 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>
  );
}