时间戳

首页 > 解决方案 > NextJS useEffect locaStorage 问题

reactjs - NextJS useEffect locaStorage 问题

问题描述

我正在尝试从 localstorage 获取字符串并在某些条件下检查并根据 localstorage 的值重定向页面

但问题是，即使在它重定向到原始页面之前，我也可以看到该页面几秒钟

基本上是它的认证之类的东西

这是代码

import React from "react";
import AdminDashboard from "../components/AdminDashboard";
import Router from "next/router";
import SignIn from "../pages/index";
import useRouter from "next/router";
import fetch from "isomorphic-unfetch";

var userType;
export default function Test({ token }) {
  const [userType, setuserType] = React.useState(false);

  React.useLayoutEffect(() => {
    if (userType !== true) {
      const lt = localStorage.getItem("userType");
      if (lt !== true) Router.push("/");
    }
    return () => {};
  }, []);
  {
    console.log(token);
  }
  return (
    <div>
      <AdminDashboard>Admin Page </AdminDashboard>
    </div>
  );
}

标签： reactjsnext.js

解决方案

您可以仅在客户端中呈现页面以避免页面闪烁。

另一方面，您可以只使用 useEffect。

const Page = null;

React.useEffect(() => {
    if (userType !== true) {
      const lt = localStorage.getItem("userType");
      if (lt !== true) Router.push("/");
    } else {
      Page = (
        <div>
          <AdminDashboard>Admin Page </AdminDashboard>
        </div>
      )
    }
}, [])

return Page

推荐阅读