在React路由器DOM之后，ReactJS应用程序不断重新加载

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

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </Router>
  );
}

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

function MyComponent() {
  const history = useHistory();

  const handleClick = () => {
    history.push('/new-route');
  };

  return <button onClick={handleClick}>Go to New Route</button>;
}

import React, { useMemo } from 'react';

const MyComponent = ({ data }) => {
  const processedData = useMemo(() => {
    // 处理数据的逻辑
    return data.map(item => item * 2);
  }, [data]);

  return <div>{processedData}</div>;
};

// 服务器端代码示例
app.get('*', (req, res) => {
  const context = {};
  const app = (
    <Router location={req.url} context={context}>
      <App />
    </Router>
  );

  ReactDOMServer.renderToString(app);

  if (context.url) {
    res.redirect(context.url);
  } else {
    res.send(html);
  }
});