Error: [Header] is not a <Route> component

Question

I continue to run into the above mentioned error despite my efforts to fix them. The terminal claims the application compiles without issue but nothing shows up on the browser. I found the error my looking at the console. Here is the index.js file for the Header component that the error is referring to:

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;

Here is the 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;

I can provide further code if it is needed.

Answer 1

In react-router-dom version 6 Routes components can have only Route or React.Fragment as a child component, and Route components can have only Routes or another Route component as parent. Header is not a Route component and fails the invariant.

Move the Router into app and render the Header and Footer components into it instead, then wrap the Route components in Routes.

App

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

Header

Fix the Route components, they no longer use component or render to render the routed components, instead they now use an element prop to render ReactElements, i.e. 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>
    );
  }
}

Though it may make more sense to move the routes into the app as content between the header and footer.

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