REACT路由 - React-Router-Dom PushState（）呼叫历史记录发生了很多次

Question

我正在使用React-Router-Dom（V6），并注意到我无法按预期使用“浏览器”按钮。似乎我的应用程序（使用React/Redux）将位置多次推到浏览器历史记录时，当我将其路由到应用程序中的其他位置时。

这也导致Safari的申请崩溃：

SecurityError：尝试使用history.pushstate（）每30秒超过100次

代码看起来像这样：

app.tsx

...
<BrowserRouter>
   <Routes>
      <Route path={ROUTES.auth.login} element={<PublicRoute component={Login} />} />
      <Route path={ROUTES.auth.register} element={<PublicRoute component={Register} />} />
      <Route path={ROUTES.dashboard} element={<PrivateRoute component={Dashboard} />} />
   </Routes>
</BrowserRouter>
...

publicRoute.tsx

...
export default function PublicRoute({ propsForComponent = {}, ...props }: PublicRouteProps): ReactElement {
    const { showLoadingScreen } = useSelector((state: RootState) => ({
        showLoadingScreen: state.loading.showLoadingScreen,
    }));

    const { component: Component } = props;

    if (showLoadingScreen) return <LoadingOverlay />;

    return <Component {...propsForComponent} />;
}
...

我发现< EM> PublicRoute 组件由于使用UseElector钩与Redux Store的连接而被多次调用。

showloadingscreen 在应用程序试图获取用户时将更新此变量。

因此，我的问题现在是：如何防止多个重新租户，这会导致 history.pushstate（）调用？

我知道我可以将 loadingoverlay 组件移至其他入口点。但是在私有中，我也已连接到redux状态，因为我需要访问用户对象。 使用 PublicRoute 组件显示了最小的例子...）

（我 干杯！