如何在重定向之前防止组件显示？

Question

我的 react/redux 应用程序出现问题。 我已经成功实现了登录功能——登录后重定向到主页。

我遇到的问题是，如果我转到 URL，然后输入 /login。登录屏幕显示一秒钟，然后重定向到主页。如何让它立即重定向？

注意：我能够使其工作的唯一方法不是检查状态 isAuthenticated，而是检查 localStorage 的令牌，然后重定向。

const App = () => {
  useEffect(() => {
    if (localStorage.token) {
      store.dispatch(loadUser());
    }
  });

  return (
    <Provider store={store}>
      <Router>
        <div id='js-scroll'>
          <Switch>
            <Route exact path='/' component={Home} />
            <Route exact path='/register' component={Register} />
            <Route exact path='/login' component={Login} />
          </Switch>
        </div>
      </Router>
    </Provider>
  );
};

const Login = ({ login, isAuthenticated }) => {
  if (isAuthenticated) {
    return <Redirect to='/' />;
  }

  return ( ... )

const mapStateToProps = state => ({
  isAuthenticated: state.authReducer.isAuthenticated
});

export default connect(
  mapStateToProps,
  { login }
)(Login);

Answer 1

渲染完成后调用 useEffect 钩子。在第一次渲染时将 isAuthenticated 设置为 false ，然后将其提交给 dom ，然后通过您的操作进行更改。

loadUser 函数可能是一个 thunk，使得这种中间状态更加明显，因为在让用户离开服务器时存在延迟。

如果是这种情况，解决方案是将 isAuthenticated 值从布尔标志转换为具有三个可能值的值。
例如：认证、认证、未认证

然后你会改变你的路线看起来像这样：

const Login = ({ login, authenticationStatus }) => {

  if(authenticationStatus === 'authenticating') {
    return null; // Or loading page
  } 

  if(authenticationStatus === 'authenticated') {
    return <Redirect to='/' />
  } 

  return ( ... )

Answer 2

编辑

我的理解是，您有一个存储在本地存储中的令牌，并且您正在调度一个操作，然后从该令牌加载用户。加载用户后，您将 isAuthenticated 属性设置为 true。 如果是这种情况，那么浏览器将需要一些时间来获取用户详细信息，因此会暂时显示登录屏幕。在这种情况下，您需要一个加载屏幕，同时调用 api 来获取用户详细信息。

我的建议是将isLoading 状态与isAuthenticated 分开。在进行 api 调用之前将 isLoading 设置为 true，一旦 api 调用完成（成功/失败），然后将 isLoading 设置为 false 并相应地设置 isAuthenticated。 在您的登录组件中检查 isLoading 是否设置为 true，然后显示加载微调器（或其他东西），否则显示您拥有的常规代码。

如果我理解有误，请告诉我。

我的 api 调用通常具有以下效果。

export const useHttp = (url, dependencies) => {

  const [isLoading, setisLoading] = useState(true);
  const [data, setdata] = useState(null);
  useEffect(() => {
    fetch(url)
    .then(response => response.json())
    .then(data => {
      setisLoading(false);
      setdata(data);
    })
    .catch((err) => {
      setisLoading(false);
      console.log(err);
    })
  }, [url,  ...dependencies])

  return [isLoading, data];
}