React Router v6：点击激活的NavLink如何强制重渲染路由组件？

react-router-dom v6默认不会在路径相同时重新渲染对应路由组件，要实现点击已激活的NavLink时强制重渲染，有以下几种可行方案：

方案一：自定义NavLink点击事件，附加动态参数触发更新 #

给NavLink绑定点击事件，判断当前路径与目标路径是否一致，若一致则通过useNavigate跳转时附加一个随机时间戳参数，触发路由组件重新挂载。

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

function CustomNavLinks() {
  const navigate = useNavigate();
  const location = useLocation();

  const handleNavClick = (targetPath) => {
    if (location.pathname === targetPath) {
      // 用replace跳转并附加随机参数，避免历史记录冗余
      navigate(`${targetPath}?refresh=${Date.now()}`, { replace: true });
    }
  };

  return (
    <>
      <NavLink 
        to="/pathOne" 
        className="ripple"
        onClick={() => handleNavClick("/pathOne")}
      >label1</NavLink>
      <NavLink 
        to="/pathTwo" 
        className="ripple"
        onClick={() => handleNavClick("/pathTwo")}
      >label2</NavLink>
    </>
  );
}

同时给对应路由组件设置基于location.search的key，确保参数变化时组件重新渲染：

import { Route, Routes, useLocation } from 'react-router-dom';
import PathOneComponent from './PathOneComponent';

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

  return (
    <Routes>
      <Route 
        path="/pathOne" 
        element={<PathOneComponent key={location.search} />} 
      />
      <Route path="/pathTwo" element={<PathTwoComponent />} />
    </Routes>
  );
}

方案二：给路由组件设置动态key触发重渲染 #

在路由配置中，给需要强制重渲染的组件绑定包含动态状态的key，点击激活NavLink时更新该状态，让key变化从而触发组件重新挂载。

import { useState } from 'react';
import { NavLink, Route, Routes, useLocation } from 'react-router-dom';
import PathOneComponent from './PathOneComponent';

function App() {
  const [renderTrigger, setRenderTrigger] = useState(Date.now());
  const location = useLocation();

  return (
    <div>
      <NavLink 
        to="/pathOne" 
        className="ripple"
        onClick={() => {
          if (location.pathname === "/pathOne") {
            setRenderTrigger(Date.now());
          }
        }}
      >label1</NavLink>
      <NavLink to="/pathTwo" className="ripple">label2</NavLink>

      <Routes>
        <Route 
          path="/pathOne" 
          element={<PathOneComponent key={`pathOne-${renderTrigger}`} />} 
        />
        <Route path="/pathTwo" element={<PathTwoComponent />} />
      </Routes>
    </div>
  );
}

方案三：在路由组件内部监听路径变化执行刷新逻辑 #

如果只是需要在重复点击时刷新数据而非重新挂载组件，可以在组件内部用useLocation结合useEffect监听location变化（包括search、hash等属性），触发数据刷新。

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

function PathOneComponent() {
  const location = useLocation();

  useEffect(() => {
    // 这里执行需要刷新的逻辑，比如重新请求数据
    const fetchData = async () => {
      const res = await fetch('/api/pathOneData');
      const data = await res.json();
      // 更新组件状态
    };
    fetchData();
  }, [location]); // 监听整个location对象，任何属性变化都会触发

  return <div>Path One Content</div>;
}

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