react-router-dom <Link/>跳转后如何让JavaScript代码无需页面重载重复执行？

React Router 用<Link>跳转是单页应用的无刷新跳转，只会更新组件而非整个页面，所以依赖页面加载触发的JS逻辑只会执行一次。针对你提到的两个场景，给你几个可行的解决办法：

1. 用React钩子/生命周期绑定路由相关依赖 #

函数组件（推荐） #

用useEffect钩子监听路由参数或路径变化，一旦变化就重新执行目标逻辑：

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

function TargetPage() {
  const params = useParams(); // 监听路由参数
  const location = useLocation(); // 监听当前路径

  useEffect(() => {
    // 页面首次加载或路由变化时，执行你需要的JS
    // 场景1：修改满足条件的元素状态
    const targetEl = document.querySelector('.condition-element');
    if (targetEl && someCondition) {
      targetEl.classList.add('active');
    }
    // 场景2：重置移动端菜单状态
    const mobileMenu = document.querySelector('.mobile-menu');
    mobileMenu.classList.remove('open');
  }, [params, location.pathname]); // 依赖项变化时触发回调

  // ...组件其他代码
}

类组件 #

在componentDidMount（首次加载）和componentDidUpdate（路由参数变化时）中执行逻辑：

import React from 'react';
import { withRouter } from 'react-router-dom';

class TargetPage extends React.Component {
  componentDidMount() {
    this.runTargetLogic();
  }

  componentDidUpdate(prevProps) {
    // 对比路由参数，变化时重新执行
    if (this.props.match.params.id !== prevProps.match.params.id) {
      this.runTargetLogic();
    }
  }

  runTargetLogic() {
    // 这里写要执行的JS逻辑
    const targetEl = document.querySelector('.condition-element');
    if (targetEl) targetEl.classList.toggle('active', true);
    const mobileMenu = document.querySelector('.mobile-menu');
    mobileMenu.classList.remove('open');
  }

  render() {
    // ...渲染内容
  }
}

export default withRouter(TargetPage);

2. 全局监听路由变化 #

在顶层组件（比如App.js）中监听路由变化，统一处理全局逻辑（比如移动端菜单重置）：

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

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

  useEffect(() => {
    // 每次路由跳转后都会执行这里的代码
    const mobileMenu = document.querySelector('.mobile-menu');
    if (mobileMenu) mobileMenu.classList.remove('open');
    // 其他需要全局触发的逻辑也可以放在这里
  }, [location]);

  return (
    {/* 路由配置和其他组件 */}
  );
}

3. 封装自定义钩子复用逻辑 #

把需要重复执行的JS逻辑封装成自定义钩子，在任意页面组件中调用：

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

// 自定义钩子：路由变化时执行目标逻辑
function useRouteUpdatedLogic() {
  const location = useLocation();

  useEffect(() => {
    // 场景1：更新元素状态
    const targetEl = document.querySelector('.condition-element');
    if (targetEl) targetEl.classList.add('active');
    // 场景2：重置移动端菜单
    const mobileMenu = document.querySelector('.mobile-menu');
    mobileMenu.classList.remove('open');
  }, [location]);
}

// 在页面组件中使用
function SomePage() {
  useRouteUpdatedLogic();

  // ...组件其他代码
}

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