除非刷新页面，否则React Router会更改URL，但不会查看

问题描述

我正在使用“ react-router”：“ ^ 5.2.0”，“ react-router-dom”：“ ^ 5.1.2”，并且视图没有变化。

在我的app.js中，我以前是从“ react-router-dom”导入{Route，browserRouter as Router，Switch};

当我这样做时，我可以登录，URL会正确更改，但是我需要手动刷新所有页面以加载视图，并且在控制台中出现此错误：'警告：忽略历史记录属性。要使用自定义历史记录，请使用import { Router }而不是import { browserRouter as Router }。'

所以我相应地更改了导入，现在我没有收到错误，但URL /视图仍然存在相同的问题。

我在app.js中的路线如下：

 return (
      <div>
        <ThemeProvider theme={theme}>
          <GlobalStyle />
          <Router history={history}>
            <UsersContextProvider>
              <VehiclesContextProvider>
                <CampaignsContextProvider>
                  <ClientsContextProvider>
                    <Switch>
                      <ErrorBoundary>
                        {alert.message && (
                          <div className={`alert ${alert.type}`}>
                            {alert.message}
                          </div>
                        )}

                        <PersistGate persistor={persistor}>
                          <Suspense fallback={<Spinner />}>
                            <Route
                              exact
                              path="/login"
                              component={SignInAndSignUpPage}
                            />
                            <PrivateRoute
                              exact
                              path="/"
                              component={Dashboard}
                            />
                            <PrivateRoute
                              path="/dashboard"
                              component={Dashboard}
                            />
                            <PrivateRoute
                              path="/userlist"
                              component={UserList}
                            />
                            <PrivateRoute
                              path="/campaignlist"
                              component={CampaignList}
                            />
                            <PrivateRoute
                              path="/saleslist"
                              component={SalesList}
                            />
                            <PrivateRoute
                              path="/clientslist"
                              component={ClientsList}
                            />
                            <PrivateRoute path="/fleet" component={Fleet} />
                            <PrivateRoute
                              path="/assignmentsList"
                              component={AssignmentsList}
                            />
                            <PrivateRoute
                              path="/teamsList"
                              component={TeamsList}
                            />
                            <PrivateRoute
                              path="/installerApp"
                              component={InstallerApp}
                            />
                            <PrivateRoute
                              path="/installPlacements"
                              component={InstallPlacements}
                            />
                            <PrivateRoute
                              path="/removePlacements"
                              component={RemovePlacements}
                            />
                            <PrivateRoute
                              path="/searchVehicles"
                              component={SearchVehicles}
                            />
                          </Suspense>
                        </PersistGate>
                      </ErrorBoundary>
                    </Switch>
                  </ClientsContextProvider>
                </CampaignsContextProvider>
              </VehiclesContextProvider>
            </UsersContextProvider>
          </Router>
        </ThemeProvider>
      </div>

我的redux登录功能：

function login(email,password) {
  return (dispatch) => {
    dispatch(request({ email }));

    userService.login(email,password).then(
      (user) => {
        dispatch(success(user));

        if (installerPermissions.includes(user.data.user.role)) {
          history.push('/installerApp');
        } else {
          history.push('/dashboard');
        }
        // console.log('test user dispatch',user);
      },(error) => {
        dispatch(failure(error));
        dispatch(alertActions.error(error));
      }
    );
  };

有人知道我如何解决这个问题吗？我浏览了https://reactrouter.com/web/api/Router的文档，但是找不到合适的解决方案。

我还在此处随附了一份回购副本：https://github.com/SerdarMustafa1/ad-app

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）