reactjs - 如何使用 nextjs 删除此 Prop 类型警告？

Question

我在控制台中收到以下警告:

警告: Prop “href”不匹配。服务器:“/register” 客户端:“/profile”

相关代码片段如下。如果用户已登录，则显示按钮的一个版本，如果他们已注销，则显示不同的版本。服务器端呈现的版本将始终对注销的用户进行评估。当用户在浏览器中登录时，不匹配会导致此警告。

class Header extends Component {
  render() {
    return (
      <HeaderContainer>
        <HeaderButton />
      </HeaderContainer>
    );
  }
}

const HeaderButton = () => {
  if (isLoggedIn()) {
    return (
      <Link href="/profile" as="/profile">
        <Button href="/profile">Profile</Button>
      </Link>
    );
  }

  return (
    <Link href="/register" as="/register">
      <Button href="/register">Register</Button>
    </Link>
  );
};

isLoggedIn() 的代码是:

export const isLoggedIn = () => {
  if (typeof window === "undefined") {
    return false;
  }

  const token = window.localStorage.getItem("bearer_token");
  if (!token) return false;
  if (!tokenIsValid(token)) return false; // inspects the JWT token
  return true;
};

我该如何解决这个问题？

Answer 1

此问题的一个可能的解决方案是使用 HeaderButton 组件中的state hooks 评估用户是否已登录:

const HeaderButton = () => {
  const [loggedIn, setLoggedIn] = useState(false); // logged out by default

  useEffect(() => {
    setLoggedIn(isLoggedIn());  // calculating logged in state within effect
  });

  // and watching the state
  if (loggedIn) {
    return (
      <Link href="/profile" as="/profile">
        <Button href="/profile">Profile</Button>
      </Link>
    );
  }

  return (
    <Link href="/register" as="/register">
      <Button href="/register">Register</Button>
    </Link>
  );
};