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

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

框架

我在用 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

我来解答赞 8 收藏

反馈

2 条解答

♫东正 Lv1

这个问题很典型，React Router v6 下同一个路由只是参数变了，组件不会重新挂载，所以 useEffect 只跑一次。

两种解法：

方法一：把 params.id 放进 useEffect 依赖

import { useParams } from 'react-router-dom';

import { 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 强制重建

function App() {

  return (

    <BrowserRouter>

      <Routes>

        <Route path="/user/:id" element={<UserProfile key={location.pathname} />} />

      </Routes>

    </BrowserRouter>

  );

}

不过方法二有点暴力，每次都重新创建组件，性能上会有点浪费。

推荐用方法一，把依赖写对就行。useEffect 的依赖数组漏了什么参数就会不触发，漏了 id 是最常见的情况。

2026-03-20 12:05

玉曼🍀 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