时间戳

首页 > 解决方案 > 如何使用 nextjs 删除此道具类型警告？

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

问题描述

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

Warning: Prop 'href' did not match. Server: "/register" Client: "/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;
};

我该如何解决这个问题？

标签： reactjsnext.js

解决方案

此问题的一种可能解决方案是评估用户是否使用组件中的状态挂钩HeaderButton登录：

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>
  );
};

推荐阅读