React在每次路由更改时执行公共代码

React是一个用于构建用户界面的JavaScript库。它采用组件化的开发模式，使得开发者可以将界面拆分成独立的、可复用的组件，从而提高代码的可维护性和可复用性。

在React中，路由是指根据URL的不同，展示不同的页面内容。React提供了React Router库来管理路由。React Router可以帮助我们在React应用中实现单页应用（SPA）的路由功能。

当每次路由发生变化时，React Router提供了一种机制来执行公共代码。这个机制是通过使用React Router提供的钩子函数来实现的。

React Router提供了以下几个钩子函数：

1. componentDidUpdate(prevProps, prevState)：在组件更新后被调用。我们可以在这个钩子函数中执行公共代码。
2. componentDidMount()：在组件挂载后被调用。如果我们希望在初始加载时执行公共代码，可以使用这个钩子函数。
3. useEffect()（仅适用于函数组件）：在函数组件中，我们可以使用React的useEffect()钩子函数来执行公共代码。useEffect()接收一个回调函数作为参数，这个回调函数会在每次渲染后执行。

在每次路由更改时执行公共代码的具体实现方式取决于你使用的React Router版本和你的项目结构。下面是一个示例代码片段，展示了如何在React Router v5中实现在每次路由更改时执行公共代码：

import React, { useEffect } from 'react';
import { BrowserRouter as Router, Route, Switch, useHistory } from 'react-router-dom';

const App = () => {
  const history = useHistory();

  useEffect(() => {
    const unlisten = history.listen(() => {
      // 在每次路由更改时执行公共代码
      console.log('执行公共代码');
    });

    return () => {
      unlisten();
    };
  }, [history]);

  return (
    <Router>
      <Switch>
        {/* 定义你的路由 */}
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
};

export default App;

在上面的示例中，我们使用了React的useEffect()钩子函数来监听路由的变化。每当路由发生变化时，useEffect()的回调函数会被调用，从而执行公共代码。

对于React Router v6，具体的实现方式可能会有所不同，因为React Router v6采用了不同的API。你可以参考React Router官方文档来了解更多关于React Router的用法和API。

腾讯云提供了一系列与React相关的产品和服务，例如云服务器、云数据库、云存储等。你可以通过访问腾讯云官方网站来获取更多关于这些产品的详细信息和文档链接。