"react-router-dom": "^6.3.0", 当我点击操作时 URI 正在改变但组件没有安装

Question

当我单击 React 应用程序 header 中的操作时组件未安装，但 URI 更改工作正常。

我正在使用

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

我的代码是

Header.js

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

const Header= () => {
  return (
    <nav className="navbar">
    <Router>
        <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>
    </Router>
    </nav>
  );
};

export default Header;

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;

Answer 1

我还包含了 Header 用于包装 Router 标签。

Header.js

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

const Header= () => {
  return (
    <nav className="navbar">
        <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>
  );
};

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

"react-router-dom": "^6.3.0", 当我点击操作时 URI 正在改变但组件没有安装

"react-router-dom": "^6.3.0", when I click the action the URI is changing but component is not mounting

javascript

reactjs

react-router-dom