React Router V6：同一路由路径下如何重新渲染组件

方法一：组件内监听路由变化触发数据刷新 #

在需要重新加载数据的组件（比如User）中，通过useLocation钩子监听路由变化，将location作为useEffect的依赖项。只要路由导航被触发（即使是同路径），location对象会更新，进而触发useEffect重新执行数据获取逻辑。

示例（User.jsx）：

import { useEffect, useState } from 'react';
import { useLocation } from 'react-router-dom';

export default function User() {
  const location = useLocation();
  const [userData, setUserData] = useState([]);

  useEffect(() => {
    // 数据获取逻辑
    const fetchUserData = async () => {
      try {
        const response = await fetch('/api/user-list');
        const data = await response.json();
        setUserData(data);
      } catch (error) {
        console.error('获取用户数据失败:', error);
      }
    };

    fetchUserData();
  }, [location]); // 依赖location，路由变化时触发

  return (
    <div>
      {/* 渲染用户数据 */}
    </div>
  );
}

同时修改侧边栏点击逻辑，确保同路径点击能触发导航：
示例（Sidebar.jsx）：

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

export default function Sidebar() {
  const navigate = useNavigate();

  const handleMenuClick = (path) => {
    // 强制导航到目标路径，即使当前已在该路径
    navigate(path, { replace: true });
  };

  return (
    <Menu>
      <Menu.Item key="users" onClick={() => handleMenuClick('/user')}>
        User
      </Menu.Item>
      <Menu.Item key="contact" onClick={() => handleMenuClick('/contact')}>
        Contact
      </Menu.Item>
    </Menu>
  );
}

方法二：给路由组件添加动态Key强制重新挂载 #

在路由配置中，给需要重新加载的组件添加基于当前路由信息的key属性。这样每次导航（包括同路径）都会让React认为是新组件，从而重新挂载并触发useEffect。

示例（路由配置）：

import { Routes, Route, useLocation } from 'react-router-dom';
import MainLayout from './MainLayout';
import User from './User';
import Contact from './Contact';
import Login from './Login';

export default function AppRoutes() {
  const location = useLocation();

  return (
    <Routes>
      <Route path="" element={<MainLayout />}>
        {/* 用路由完整信息作为key，确保同路径导航时key变化 */}
        <Route path="/user" element={<User key={`${location.pathname}${location.search}`} />} />
        <Route path="/contact" element={<Contact key={`${location.pathname}${location.search}`} />} />
        <Route exact path="/" element={<Login />} />
      </Route>
    </Routes>
  );
}

方法三：自定义Link组件强制触发导航 #

创建自定义Link组件，点击时即使当前路径与目标路径相同，也强制触发路由导航（携带随机state确保location对象更新）：

示例（CustomLink.jsx）：

import { Link, useLocation, useNavigate } from 'react-router-dom';

export default function CustomLink({ to, children, ...props }) {
  const location = useLocation();
  const navigate = useNavigate();

  const handleClick = (e) => {
    e.preventDefault();
    // 同路径时强制导航，带随机state标记刷新
    if (location.pathname === to) {
      navigate(to, { state: { refresh: Date.now() }, replace: true });
    } else {
      navigate(to);
    }
  };

  return (
    <Link to={to} onClick={handleClick} {...props}>
      {children}
    </Link>
  );
}

之后在Sidebar中使用该自定义Link：

<Menu>
  <Menu.Item key="users" >
     <CustomLink to="/user">User</CustomLink>
  </Menu.Item>
  <Menu.Item key="contact" >
     <CustomLink to="/contact">Contact</CustomLink>
  </Menu.Item>
</Menu>

同时保持组件内useEffect依赖location，即可触发数据刷新。

内容的提问来源于stack exchange，提问作者phu.duongquoc