React Router跳转后页面不刷新怎么办？

欧阳振岚提问于 2026-03-17 14:02:27 阅读 31

框架

我在用 React Router 做单页应用，点击链接跳转到新路由，但组件没重新渲染，数据还是旧的。比如从 /user/1 跳到 /user/2，页面内容没变。

我试过用 useEffect 监听 location.pathname，但有时候还是不触发。是不是应该用 key 强制重建组件？

这是我的路由写法：

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import UserProfile from './UserProfile';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/user/1">User 1</Link>
        <Link to="/user/2">User 2</Link>
      </nav>
      <Routes>
        <Route path="/user/:id" element={<UserProfile />} />
      </Routes>
    </BrowserRouter>
  );
}

在 UserProfile 组件里，我只在 useEffect 里根据 params.id 请求数据，但切换 ID 时没重新请求。

Redux

我来解答赞 1 收藏

反馈

1 条解答

玉曼🍀 Lv1

问题在于 useEffect 的依赖数组没加 id，导致参数变了但 effect 不执行。

改成这样：

import { useParams, useEffect, useState } from 'react';



function UserProfile() {

  const { id } = useParams();

  const [user, setUser] = useState(null);



  useEffect(() => {

    fetch(/api/user/${id})

      .then(res => res.json())

      .then(data => setUser(data));

  }, [id]); // 关键：把 id 加到依赖数组里



  return {user?.name}
;

}

或者更暴力的方式，给路由加 key 强制重建组件：

} />

2026-03-17 17:28