如果用户来自浏览器 url 栏，NextJS 重定向将不起作用

Question

已经花了三天时间努力解决这个问题，所以感谢您的帮助。

我有一个简单的组件用于检查 token 来自 localStorage:

import Router from 'next/router';

const Blog = _ => {
  const token = localStorage.getItem("token");
  useEffect(_ => {
    if(!token){
      Router.push('/')
    }
  }, [])
}

如果我们有这样的代码，这将起作用：

<Link href="/blog">Blog</Link>

然后当您单击 blog 时，您将被重定向到“/”。但是，如果您在浏览器中输入 url 栏 /blog 并按下回车键，您将不会重定向到主页“/”。

更新：本地存储中没有令牌

Answer 1

您的代码有两个问题：

功能组件中没有return语句。如果没有 returned.
如果您在浏览器中输入“/blog”，Nextjs 会抛出错误，因为代码首先在服务器上运行（服务器没有本地存储 -错误：localStorage 未定义）。要解决此问题，您可以执行以下两项操作之一 -
- 检查代码是在服务端执行还是在客户端执行，然后相应处理
- 将 localStorage.getItem 移动到 componentDidMount（或等效的挂钩）中。

import Router from "next/router";
import { useEffect } from "react";

const Blog = _ => {
  useEffect(_ => {
    const token = localStorage.getItem("token");
    if (!token) {
      Router.push("/");
    }
  }, []);
  return <p>This is a blog</p>;
};

export default Blog;

如果用户来自浏览器 url 栏，NextJS 重定向将不起作用

NextJS Redirect not work if user come from browser url bar

reactjs

next.js