React Hooks项目点击返回按钮无法导航至Home页面求助

核心问题定位 #

查看你提供的代码后，发现Home组件中使用了原生<a>标签跳转至Register页面，这会触发整页刷新，破坏React Router维护的单页应用路由历史状态，导致点击返回按钮时，虽然路径切换回/，但应用的路由状态异常，无法正确渲染Home页面。

具体修复步骤 #

1. 替换原生a标签为React Router的Link组件 #

在home.js中，导入Link组件并替换原生a标签：

import React from "react";
import { Link } from "react-router-dom"; // 导入Link组件

const Home = () => {
  return (
    <div>
      <h1>Home Page</h1>
      {/* 使用Link组件替代原生a标签 */}
      <Link to="/register">Go to Register</Link>
    </div>
  );
};

export default Home;

Link组件会在单页应用内部处理跳转，不会刷新页面，确保路由历史记录被正确维护。

2. 确认返回按钮的导航逻辑正确 #

你的Register组件中已经使用useNavigate钩子的navigate(-1)实现返回，这个逻辑是正确的，无需修改：

import React from "react";
import { useNavigate } from "react-router-dom";

const Register = () => {
  const navigate = useNavigate();

  const handleBack = () => {
    navigate(-1); // 正确触发历史记录返回
  };

  return (
    <div>
      <h1>Register Page</h1>
      <button onClick={handleBack}>Back to Home</button>
    </div>
  );
};

export default Register;

3. 验证路由配置完整性 #

确认App.js中的路由配置正确，根路径/指向Home组件，且路由被BrowserRouter包裹：

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "./components/home";
import Register from "./components/register";

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/register" element={<Register />} />
      </Routes>
    </Router>
  );
}

export default App;

完成以上修改后，点击Register页面的返回按钮即可正常导航回Home页面，页面不会刷新，路由状态保持正常。

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