Javascript 登录前，React auth route重定向到仪表板

我有认证路由和未经认证的路由，这将只是登录页面。当用户身份验证令牌在localstorage中过期时，它将从localstorage中删除该项，在页面上短暂显示错误消息，然后重定向。如何使其在显示任何错误消息之前重定向到登录页面。我已登录未经验证的路径：

const ProtectedRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={props =>
      getItem(TOKEN) ? (
        <Layout>
          <Component {...props} />
        </layout>
      ) : (
        <Redirect
          to={{
            pathname: '/login',
          }}
        />
      )
    }
  />
);

const UnauthenticatedRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={props =>
      !getItem(TOKEN) ? (
        <Component {...props} />
      ) : (
        <Redirect
          to={{
            pathname: '/',
          }}
        />
      )
    }
  />
);

constprotectedroute=（{component:component，…rest}）=>(
获取项目（令牌）(
) : (
)
}
/>
);
const UnauthenticatedRoute=（{component:component，…rest}）=>(
！getItem（令牌）(
) : (
)
}
/>
);

这是我的应用程序上的示例页面：

  const { id } = useContext(UserContext);
  const { loading, error, data } = useQuery(QUERY, {
    variables: { id },
  });

if (loading) {
    return <Loading />;
  }

  if (error)) {
    console.log(error);

    return <Alert message="Error" />;
  }

  return (
    <PersonPage
      props={}
    />
  );

const{id}=useContext（UserContext）；
const{loading，error，data}=useQuery（查询{
变量：{id}，
});
如果（装载）{
返回；
}
如果（错误））{
console.log（错误）；
返回；
}
返回(
);

我不太清楚为什么它不能直接进入登录页面。 在这里，我使用graphql检查刷新令牌是否过期：

case 'INTERNAL_SERVER_ERROR':
              if (err) {
                removeItem(AUTH_TOKEN);
                // history.push('/login');
                // return <Redirect to="/login" />;
              }

案例“内部服务器错误”：
如果（错误）{
removeItem（身份验证令牌）；
//history.push（'/login'）；
//返回；
}

我两个都试过了，但都不走运

编辑

从“React”导入React；
从“react router dom”导入{Route，Redirect}；
从“”导入主布局；
从“常量”导入{AUTH_TOKEN}；
//从“utils/localStorage”导入{getItem}；
从“react use localstorage”导入useLocalStorage；
const ProtectedRouteWithLayout=（{component:component，…rest}）=>{
const[authToken]=useLocalStorage（AUTH_令牌）；
console.log（authToken）；
返回(
authToken(
{console.log（authToken）}
) : (
)
}
/>
);
};
导出默认的ProtectedRouteWithLayout；

能否显示

警报

组件，并更具体地说明何时发生重定向？在发生重定向之前，警报是否需要用户交互，或者在自动重定向之前，警报只是内容的闪现？警报组件来自antdesign，在自动重定向之前，警报只是闪现。当我从本地存储中删除身份验证令牌时，应该会发生重定向。History.push可以工作，但在重定向到登录屏幕@lawrence Witt之前，页面上仍会显示一个快速错误闪烁。若要在重定向后显示消息，您可以添加一个查询参数，如

/login？error\u message=token\u expired

，如果您使用react路由器或窗口位置显式重定向。否则，您可以添加一个本地存储项

error\u message=token\u expired

，这样您的登录组件就可以显示它并将其删除。问题是它会显示一条错误消息，并且不会立即重定向@Jerryclooks，就像您的

UnauthenticatedRoute

一样，

ProtectedRoute

不会重新呈现。从localstorage中删除该项后，不会通知这些组件。您可以使用类似于

react use localstorage

，将localstorage项链接到react状态，以便组件将重新渲染您是否可以显示

警报

组件，并更具体地说明何时发生重定向？在发生重定向之前，警报是否需要用户交互，或者在自动重定向之前，警报只是内容的闪现？警报组件来自antdesign，在自动重定向之前，警报只是闪现。当我从本地存储中删除身份验证令牌时，应该会发生重定向。History.push可以工作，但在重定向到登录屏幕@lawrence Witt之前，页面上仍会显示一个快速错误闪烁。若要在重定向后显示消息，您可以添加一个查询参数，如

/login？error\u message=token\u expired

，如果您使用react路由器或窗口位置显式重定向。否则，您可以添加一个本地存储项

error\u message=token\u expired

，这样您的登录组件就可以显示它并将其删除。问题是它会显示一条错误消息，并且不会立即重定向@Jerryclooks，就像您的

UnauthenticatedRoute

一样，

ProtectedRoute

不会重新呈现。从localstorage中删除该项后，不会通知这些组件。您可以使用类似于

react use localstorage

，将localstorage项链接到react状态，以便组件将重新呈现

import React from 'react';
import { Route, Redirect } from 'react-router-dom';

import MasterLayout from '';
import { AUTH_TOKEN } from 'constants';

// import { getItem } from 'utils/localStorage';

import useLocalStorage from 'react-use-localstorage';

const ProtectedRouteWithLayout = ({ component: Component, ...rest }) => {
  const [authToken] = useLocalStorage(AUTH_TOKEN);

  console.log(authToken);

  return (
    <Route
      {...rest}
      render={props =>
        authToken ? (
          <MasterLayout>
            {console.log(authToken)}
            <Component {...props} />
          </MasterLayout>
        ) : (
          <Redirect
            to={{
              pathname: '/login',
            }}
          />
        )
      }
    />
  );
};

export default ProtectedRouteWithLayout;