React路由切换后如何统一执行指定代码（避免重复编码）

嘿，这个问题我太有共鸣了——给26个组件挨个写useEffect简直是重复劳动的噩梦！别担心，咱们有好几种优雅的方案能一次性解决这个问题，不用重复编码：

方案一：在根组件全局监听路由变化（最省事） #

如果你要给所有路由都加上这段代码，直接在你的根组件（比如App.js）里用React Router的useLocation钩子监听路径变化就行。每次路由切换，location对象就会更新，触发useEffect执行你的代码：

import { useLocation, Routes, Route } from 'react-router-dom';
import { useEffect } from 'react';
import ComponentA from './ComponentA';
// ... 导入其他组件

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

  useEffect(() => {
    // 这里放你要执行的代码
    console.log("Awesome stackoverflow");
  }, [location]); // 依赖location，路径变化就触发

  return (
    <div className="App">
      <Routes>
        <Route path="/routeA" element={<ComponentA />} />
        <Route path="/routeB" element={<ComponentB />} />
        {/* ... 剩下的/routeC到/routeZ路由 */}
      </Routes>
    </div>
  );
}

export default App;

这个方案的好处是只写一次代码，所有路由切换都会触发，完全不用碰各个组件。

方案二：用高阶组件（HOC）包裹组件（灵活可控） #

如果你只想给部分路由加这段逻辑，或者希望逻辑和组件解耦，高阶组件是个好选择。把你的通用逻辑封装成HOC，然后给需要的组件套一层就行：

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

// 定义一个高阶组件，封装路由进入时的逻辑
const withRouteEntryLogic = (WrappedComponent) => {
  return (props) => {
    // 组件挂载（进入路由）时执行代码
    useEffect(() => {
      console.log("Awesome stackoverflow");
    }, []);

    return <WrappedComponent {...props} />;
  };
};

// 在路由配置中使用这个HOC包裹组件
<Routes>
  <Route path="/routeA" element={<withRouteEntryLogic(ComponentA) />} />
  <Route path="/routeB" element={<withRouteEntryLogic(ComponentB) />} />
  {/* 不想加逻辑的路由就直接用原组件 */}
  {/* <Route path="/routeC" element={<ComponentC />} /> */}
</Routes>

这样你可以自由选择哪些路由需要执行这段代码，而且逻辑集中在HOC里，后期修改也方便。

方案三：自定义Route组件（统一管控路由） #

另一种思路是自定义一个Route组件，把通用逻辑写在里面，然后用这个自定义Route替换React Router自带的Route。这样所有使用这个自定义Route的路由都会自动执行代码：

import { Route as ReactRoute } from 'react-router-dom';
import { useEffect } from 'react';
import { Routes } from 'react-router-dom';

function Route({ element, path, ...rest }) {
  useEffect(() => {
    // 路由匹配时执行代码
    console.log("Awesome stackoverflow");
  }, [path]); // 依赖path，确保每次进入不同路由都触发

  return <ReactRoute path={path} {...rest} element={element} />;
}

// 使用自定义的Route组件
<Routes>
  <Route path="/routeA" element={<ComponentA />} />
  <Route path="/routeB" element={<ComponentB />} />
  {/* ... 其他路由 */}
</Routes>

这个方案和全局监听类似，但逻辑是绑定在路由组件上的，适合你想把路由相关的通用逻辑都集中管理的场景。

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