React-router-dom V6 不正确更改路由（刷新 - 需要 f5 页面）

Question

我正在尝试为我的带有功能组件的 Reactjs 应用程序应用基本路径，并且 Material UI。我把放在导航栏上，预计当单击导航栏中的菜单项（购物车、联系人、产品）时，页面内容会发生变化（只保留页面的页眉和页脚）。

大功告成，当点击每个菜单项时，URL发生变化。但是页面不会改变，我必须重新加载页面才能更改内容。我不明白为什么会出现这个问题。

本期图片及详情步骤：第一步：路径为“/”时：第 2 步：单击菜单项（我们的产品），URL 更改“/product”但页面没有变化：第 3 步：必须重新加载页面才能看到页面更改为组件的内容：

下面是我的代码和文件结构：

App.js:

import "./App.css";
import Header from "./Header";
import Content from "./Content";
import Footer from "./Footer";
import Product from "./Product/Product";
import Contact from "./Contact";
import Cart from "./Cart";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";

function App() {
  return (
    <div className="app">
      <Header />

      <Router>
        <Routes>
          <Route path="/" element={<Content />} />

          <Route path="/product" element={<Product />} />
          <Route path="/contact" element={<Contact />} />
          <Route path="/cart" element={<Cart />} />
        </Routes>
      </Router>

      <Footer />
    </div>
  );
}

导出默认应用；

Header.js:

import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
const pages = ["Our Products", "Cart", "Contact"];
const settings = ["Profile", "Account", "Dashboard", "Logout"];
const links = ["/product", "/cart", "/contact"];

const Header = () => {
  return (
    <div className="app__header">
      . . .{/* render navbar */}
      <div className="header__nav">
        <Box
          sx={{
            gap: 20,
            flexGrow: 1,
            display: { xs: "none", md: "flex" },
          }}
        >
          {pages.map((page, index) => (
            <Link to={links[index]} textDecoration="none">
              <Button
                key={page}
                onClick={handleCloseNavMenu}
                sx={{ my: 2, color: "white", display: "block" }}
              >
                {page}
              </Button>
            </Link>
          ))}
        </Box>
      </div>
    </div>
  );
};

Product.js:（测试示例文本）

import React from 'react'

function Product() {
  return (
    <div>Product</div>
  )
}

export default Product

Config.json:

{
  "name": "ecommerce-web-react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.9.0",
    "@emotion/styled": "^11.8.1",
    "@mui/icons-material": "^5.6.2",
    "@mui/material": "^5.7.0",
    "@mui/x-data-grid": "^5.11.0",
    "@splidejs/react-splide": "^0.7.5",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.2.0",
    "@testing-library/user-event": "^13.5.0",
    "lodash": "^4.17.21",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
    "swiper": "^8.1.4",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

感谢您的帮助！

Answer 1

将 Header 组件 移动到 Router 中，这样它呈现的 Link 组件就可以工作并更新相同的路由上下文在 Router 之外渲染 Link 组件应该有一个不变的 warning/error。如果没有这样的 error/warning 这表示将链接渲染到单独的 router/routing 上下文中。整个应用程序只需要一个路由器，因此请删除您的应用程序中可能拥有的任何其他无关路由器。

示例：

function App() {
  return (
    <div className="app">
      <Router>
        <Header /> // <-- move into Router
        <Routes>
          <Route path="/" element={<Content />} />
          <Route path="/product" element={<Product />} />
          <Route path="/contact" element={<Contact />} />
          <Route path="/cart" element={<Cart />} />
        </Routes>
      </Router>
      <Footer />
    </div>
  );
}

React-router-dom V6 不正确更改路由（刷新 - 需要 f5 页面）

React-router-dom V6 don't change route correctly (refresh - f5 page is required)

reactjs

react-router

material-ui

react-router-dom

react-functional-component