Node.js最新版本升级后分页链接与路由失效问题求助

问题排查与修复步骤 #

1. 错误使用底层Router组件 #

你当前导入的Router是react-router-dom的底层路由组件，它需要手动传入history对象才能正常工作，否则会导致路由上下文缺失，进而触发pathname读取失败的报错。

修复：替换为封装好的BrowserRouter（Web项目最常用的路由组件）：

// 替换原导入语句
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

2. Routes标签内混入非路由组件 #

Routes组件仅允许直接嵌套Route或Outlet组件，你将导航链接StyledLink放在Routes内部，破坏了路由结构，导致路由上下文无法正确传递。

修复：将导航链接移至Routes外部、Router内部：

function App() {
  return (
    <section className="App">
      <Router>
        {/* 导航链接移到Routes外部 */}
        <StyledLink to="/">Home</StyledLink>
        <StyledLink to="/aboutUs">About us</StyledLink>
        <StyledLink to="/review">Review</StyledLink>
        
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="aboutUs" element={<About />} />
          <Route path="review" element={<Reviews />} />
        </Routes>
      </Router>
    </section>
  );
}

3. Route组件属性拼写错误 #

review路由中把element拼成了elemnent（少一个字母e），这会导致该路由无法正常渲染组件，同时干扰路由上下文工作。

修复：修正拼写错误：

<Route path="review" element={<Reviews />} />

4. 确保StyledLink正确基于路由Link封装 #

如果StyledLink是自定义组件，必须基于react-router-dom的Link组件封装，而非普通<a>标签，否则无法获取路由上下文：

// styles.js 示例正确封装方式
import { Link } from "react-router-dom";
import styled from "styled-components";

export const StyledLink = styled(Link)`
  // 自定义样式代码
  text-decoration: none;
  color: #333;
  margin: 0 10px;
`;

总结 #

按上述步骤修复后，路由上下文可正常传递，pathname相关报错会消失，导航链接与路由功能即可恢复正常。

内容的提问来源于stack exchange，提问作者Andrea Lopez Bravo