Question

我正在尝试从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>
  );
}

Answer 1

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

另一方面，您可以只使用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

NextJS useEffect locaStorage问题

1 个答案: