ReactJS点击链接URL变更但页面不跳转的问题排查求助

问题描述 #

点击导航栏链接时，浏览器地址栏URL正常变化，但页面内容未切换；仅手动在URL栏按下回车后，页面才会正确跳转。以下是相关代码及控制台错误截图：

Header组件代码 #

import React from "react";
import Navbar from "react-bootstrap/Navbar";
import { Nav } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";

import {
  HomeRounded,
  SchoolRounded,
  WorkRounded,
  Facebook,
  Twitter,
  LinkedIn,
  GitHub,
  Telegram,
} from "@mui/icons-material";

import { Link, NavLink, withRouter } from "react-router-dom";
import resumeData from "../../utils/resumeData";
import CustomButton from "../Button/Button";
import "./Header.css";

const Header = (props) => {
const pathName = props?.location?.pathname;
console.log(pathName);

return (
<Navbar expand="lg" sticky="top" className="header">
  <Nav.Link as={NavLink} to="/">
    <Navbar.Brand className="header_home">
      <HomeRounded />
    </Navbar.Brand>
  </Nav.Link>

  <Navbar.Toggle />
  <Navbar.Collapse>
    <Nav>
      <Nav.Link
        as={NavLink}
        to="/"
        className={pathName == "/" ? "header_link_active" : "header_link"}>
        Resume
      </Nav.Link>
      <Nav.Link
        as={NavLink}
        to="/portfolio"
        className={
          pathName == "/portfolio" ? "header_link_active" : "header_link"}>
        Portfolio
      </Nav.Link>         
    </Nav>
   </Navbar.Collapse>
 </Navbar>
     );
    };

   export default withRouter(Header);

App.js代码 #

import React from "react";
import {  BrowserRouter as Router,
   Switch,
   Route,
    Link
} from "react-router-dom";
import {Container, Grid } from "@material-ui/core";

import Profile from "./components/Profile/Profile";
import Header from "./components/Header/Header";
import Portfolio from "./pages/Portfolio/Portfolio";
import Resume from "./pages/Resume/Resume";
import Footer from "./components/Footer/Footer";


 function App() {
 return (
    <Container className={'top_60'}>
      <Grid container spacing={7}>
       <Grid item xs={12} sm={12} md={4} lg={3}>
        <Profile/>
       </Grid>
       <Grid item xs>       
       <Router>
      <Header/>
  
     <Switch>
         <Route path="/portfolio">
           <Portfolio />
         </Route>
         <Route path="/">
           <Resume />
         </Route>
  
       </Switch>
       </Router>
 

        <Footer/>
        </Grid>
     </Grid>
     </Container>
  );
}

export default App;

控制台错误截图 #

问题分析 #

从控制台错误可知，你使用的React Router v6已移除withRouter高阶组件，导入并使用该组件会直接报错，导致路由上下文无法正确传递，最终页面无法响应链接点击。此外，Header组件获取路由信息的方式也不符合v6规范。

修复步骤 #

1. 移除withRouter并改用useLocation钩子 #

修改Header组件，删除withRouter的导入和导出，改用React Router v6提供的useLocation钩子获取当前路径：

import React from "react";
import Navbar from "react-bootstrap/Navbar";
import { Nav } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";

import {
  HomeRounded,
  SchoolRounded,
  WorkRounded,
  Facebook,
  Twitter,
  LinkedIn,
  GitHub,
  Telegram,
} from "@mui/icons-material";

// 移除withRouter导入
import { NavLink } from "react-router-dom";
import resumeData from "../../utils/resumeData";
import CustomButton from "../Button/Button";
import "./Header.css";

// 使用useLocation钩子获取路由信息
import { useLocation } from 'react-router-dom';

const Header = () => {
  const location = useLocation();
  const pathName = location.pathname;
  console.log(pathName);

return (
<Navbar expand="lg" sticky="top" className="header">
  <Nav.Link as={NavLink} to="/">
    <Navbar.Brand className="header_home">
      <HomeRounded />
    </Navbar.Brand>
  </Nav.Link>

  <Navbar.Toggle />
  <Navbar.Collapse>
    <Nav>
      <Nav.Link
        as={NavLink}
        to="/"
        className={pathName == "/" ? "header_link_active" : "header_link"}>
        Resume
      </Nav.Link>
      <Nav.Link
        as={NavLink}
        to="/portfolio"
        className={
          pathName == "/portfolio" ? "header_link_active" : "header_link"}>
        Portfolio
      </Nav.Link>         
    </Nav>
   </Navbar.Collapse>
 </Navbar>
     );
    };

// 移除withRouter包裹
export default Header;

2. 升级路由组件为React Router v6规范（可选但推荐） #

React Router v6中Switch已被Routes替代，Route写法也有变化，修改App.js中的路由部分：

import React from "react";
// 替换Switch为Routes
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import {Container, Grid } from "@material-ui/core";

import Profile from "./components/Profile/Profile";
import Header from "./components/Header/Header";
import Portfolio from "./pages/Portfolio/Portfolio";
import Resume from "./pages/Resume/Resume";
import Footer from "./components/Footer/Footer";


 function App() {
 return (
   // 将Router移到最外层，确保所有路由相关组件都在上下文内
   <Router>
    <Container className={'top_60'}>
      <Grid container spacing={7}>
       <Grid item xs={12} sm={12} md={4} lg={3}>
        <Profile/>
       </Grid>
       <Grid item xs>       
         <Header/>
         {/* 替换Switch为Routes */}
         <Routes>
             {/* 使用element属性传递组件 */}
             <Route path="/portfolio" element={<Portfolio />} />
             <Route path="/" element={<Resume />} />
         </Routes>
         <Footer/>
        </Grid>
     </Grid>
     </Container>
   </Router>
  );
}

export default App;

3. 验证修复效果 #

修改完成后重启项目，点击导航链接时，URL变化的同时页面内容会自动切换，无需手动回车。

内容的提问来源于stack exchange，提问作者kudlatiger