如何在 NextJs 中延迟页面转换

Question

我正在尝试使用HOC withAuth保护我的私人页面。 保护工作正常，但我不希望用户在从local storage检索访问令牌时看到第二次加载。 如果我在重定向后只返回null ，我会收到错误消息，说received div without enclosing div （或类似的东西）。 有什么办法可以延迟路由转换吗？ 我的 HOC 是

export function withAuth<T extends TWithAuth = TWithAuth>(
   WrappedComponent: React.ComponentType<T>,
   ): React.ComponentType<T> {
const InnerComponent = (props: T) => {
    const [loading, setLoading] = useState(true);
    const router = useRouter();
    useEffect(() => {
        const accessToken = TokenService.getAccessToken();

        if (!accessToken) {
            router.replace('/auth/login');
        } else {
            setLoading(false);
        }
    }, []);
    return loading ? <div>loading</div> : <WrappedComponent {...props} />;
};

InnerComponent.displayName = `withAuth(${WrappedComponent.displayName || WrappedComponent.name}`;

return InnerComponent;

}

Answer 1

也许您可以在私有页面上使用 getServerSideProps 并将其包装在处理逻辑的组件中并返回

{ redirect: { destination: "/auth/login" } }

如果没有 accessToken