反応アプリケーションのヘッダーのアクションをクリックしてもコンポーネントがマウントされませんが、URIの変更は正常に機能しています。

使っています

"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-router-dom": "^6.3.0"

私のコードはApp.jsです

import React, { Component } from "react";
import {
  BrowserRouter as Router,
  Routes,
  Route,
  Navigate,
} from "react-router-dom";
import Header from "./components/Header/index";
import Footer from "./components/Footer/index";
import "../styles/style.scss";

const Home = () => <div>Home</div>;
const About = () => <div>About</div>;
const User = () => <div>User</div>;

class App extends Component {
  render() {
    return (
      <div className="App">
        <header>
          <Header />
        </header>
        <main>
          <Router>
            <Routes>
              <Route exact path="/" element={<Home />} />
              <Route exact path="/about" element={<About />} />
              <Route exact path="/user" element={<User />} />
            </Routes>
          </Router>
        </main>
        <footer>
          <Footer />
        </footer>
      </div>
    );
  }
}

export default App;

Header.js

import { BrowserRouter as Router, Link } from "react-router-dom";

const Header= () => {
  return (
    <div className="navbar">
    <Router>
      <nav>
        <ul className="navbar-items">
          <li className="navbar-items_item">
            <Link to="/">Home</Link>
          </li>
          <li className="navbar-items_item">
            <Link to="/about">About</Link>
          </li>
          <li className="navbar-items_item">
            <Link to="/user">User</Link>
          </li>
        </ul>
      </nav>
    <Router>
    </div>
  );
};

export default Header;
応答

ルータータグをラップするためのヘッダーも含めました。

Header.js

import { Link } from "react-router-dom";

const Header= () => {
  return (
    <div className="navbar">
      <nav>
        <ul className="navbar-items">
          <li className="navbar-items_item">
            <Link to="/">Home</Link>
          </li>
          <li className="navbar-items_item">
            <Link to="/about">About</Link>
          </li>
          <li className="navbar-items_item">
            <Link to="/user">User</Link>
          </li>
        </ul>
      </nav>
    </div>
  );
};

export default Header;

App.js

import React, { Component } from "react";
import { Routes, Route } from "react-router-dom";
import Header from "./components/Header/index";
import Footer from "./components/Footer/index";
import "../styles/style.scss";

const Home = () => <div>Home</div>;
const About = () => <div>About</div>;
const User = () => <div>User</div>;

class App extends Component {
  render() {
    return (
      <div className="App">
          <header>
            <Header />
          </header>
          <main>
            <Routes>
              <Route exact path="/" element={<Home />} />
              <Route exact path="/about" element={<About />} />
              <Route exact path="/user" element={<User />} />
            </Routes>
          </main>
        <footer>
          <Footer />
        </footer>
      </div>
    );
  }
}

export default App;

index.js

import { BrowserRouter as Router } from "react-router-dom";
import ReactDOM from "react-dom/client";
import App from "./modules/App";
import reportWebVitals from "./reportWebVitals";

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>
);

reportWebVitals();