渲染组件之前反应路由器闪烁

问题描述

我目前正在开发一个React应用，该应用作为Chrome扩展弹出窗口运行，该弹出窗口使用redux，redux-persist（localForage）和react路由器。但是，我在应用程序上遇到闪烁。也就是说，当我点击扩展程序图标以打开弹出窗口时，在呈现所需的组件之前，它会闪烁白色。

我不确定为什么会这样。

Entrypoint (Popup.js)

const unsubscribe = store.subscribe(() => {
    const history = createMemoryHistory();
    unsubscribe(); // make sure to only fire once
    render(
        <Provider store={storeWithMiddleware}>
            <PersistGate loading={<Loading />} persistor={persistor}>
                <Router history={history}>
                    <Redirect exact from="/" to="/main/modes"/>
                    <Route exact path="/login" component={Login}/>
                    <ProtectedRoute path="/main" component={MainPage}/>
                </Router>
            </PersistGate>
        </Provider>,document.getElementById('root')
    );
});

ProtectedRouter

const ProtectedRoute = ({
  component: Component,isLoggedIn: isLoggedIn,needsCheckLogin: needsCheckLogin,setNeedsCheckLogin: setNeedsCheckLogin,checkLogin: checkLogin,userKey: userKey,userUUID: userUUID,...rest
}) => {
  // if (needsCheckLogin) {
  //   console.log("NEED LOGIN")
  //   console.log(userKey,userUUID)
  //   if (userKey && userUUID) {
  //     checkLogin(userKey,userUUID)
  //   }
  //   setNeedsCheckLogin(false);
  // }
  return (
    <Route
      {...rest}
      // maybe props is in rest?
      render={props => {
        if (isLoggedIn) {
          return <Component {...props} />;
        } else {
          return (
            <Redirect
              to={{
                pathname: "/login",state: {
                  from: props.location
                }
              }}
            />
          );
        }
      }}
    />
  );
};

const mapStatetoProps = (state) => {
  return {
    isLoggedIn: state.auth.isLoggedIn,needsCheckLogin: state.auth.needsCheckLogin,userKey: state.settings.key,userUUID: state.settings.uuid,}
}

const mapdispatchToProps = (dispatch) => {
  return {
    setNeedsCheckLogin: value => dispatch(AuthAction.SetNeedsCheckedLogin(value)),checkLogin: (key,uuid) => dispatch(AuthAction.CheckLogin(key,uuid))
  }
}

export default connect(mapStatetoProps,mapdispatchToProps)(ProtectedRoute);

在首次启动应用程序时，ProtectedRoute会检查用户身份验证，但即使被注释掉，闪烁也不会消失。

闪烁的GIF： https://imgur.com/a/ng3KQJO

解决方法

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

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

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