反应：使用空依赖数组的useEffect使用react-router-dom触发两次

【问题标题】：React: useEffect with empty dependency array firing twice with react-router-dom反应：使用空依赖数组的useEffect使用react-router-dom触发两次
【发布时间】：2022-06-25 08:53:50
【问题描述】：

我正在使用react-router-dom，而我的顶级组件的useEffect 正在触发两次。

useEffect(() => {
  console.log("use effect fired");
}, []);

输出：加载时的 2 条日志语句

这可能是什么原因造成的？

【问题讨论】：

标签： reactjs react-router-dom use-effect

【解决方案1】：

我错误地设置了我的BrowserRouter，因此：

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

我的问题已解决，我将其更改为：

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
      <App />
  </BrowserRouter>
);

BrowserRouter 应该是渲染时的根组件。这解决了我的问题，useEffect 现在只触发一次，正如预期的那样。

【讨论】：