Question

我目前正在开发一个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

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

0 个答案: