Next.js路由切换时React Context API状态重置问题求助

问题描述 #

在Next.js项目中使用React Context API管理应用状态，已将整个应用用Context包裹，但切换路由时Context中的值会重置为默认值。登录成功后，useEffect能触发并正确打印更新后的Login和userDetail状态，但跳转至其他路由时，更新后的状态就丢失了。

核心原因 #

1. 路由跳转方式错误：当前使用的是NextUI的<Link>组件（或普通<a>标签），这类跳转属于整页刷新式导航，会导致整个App组件重新挂载，Context内存状态被重置。
2. 状态未持久化：Context的状态仅存储在内存中，即使是客户端导航，若页面意外刷新，状态也会丢失。

解决方案 #

1. 改用Next.js客户端路由跳转 #

使用Next.js官方的next/link组件实现无刷新的客户端导航，避免页面重新加载。

修改NavBar组件：

// 导入Next.js的Link，替换NextUI的Link
import Link from 'next/link';
import { Navbar, Text, Avatar, Dropdown } from "@nextui-org/react";
import { Layout } from "./Layout";

export default function NavBar() {
  const collapseItems = [
    "Home",
    "Create",
    "Favourite",
    "About",
  ];

  return (
    <Layout>
      <Navbar isBordered variant="sticky">
        <Navbar.Toggle showIn="xs" />
        <Text b>Bloging Made Easy</Text>
        <Navbar.Content
          enableCursorHighlight
          activeColor="secondary"
          hideIn="xs"
          variant="highlight-rounded"
        >
          {/* 使用Next.js的Link作为Navbar.Link的底层实现 */}
          <Navbar.Link as={Link} href="/">Home</Navbar.Link>
          <Navbar.Link as={Link} href="/Create">Create</Navbar.Link>
          <Navbar.Link as={Link} href="/Favourite">Favourite</Navbar.Link>
          <Navbar.Link as={Link} href="#">About</Navbar.Link>
        </Navbar.Content>
        <Navbar.Content
          css={{
            "@xs": {
              w: "12%",
              jc: "flex-end",
            },
          }}
        >
          <Dropdown placement="bottom-right">
            <Navbar.Item>
              <Dropdown.Trigger>
                <Avatar
                  bordered
                  as="button"
                  color="secondary"
                  size="md"
                  src="https://media.istockphoto.com/id/1208175274/vector/avatar-vector-icon-simple-element-illustrationavatar-vector-icon-material-concept-vector.jpg?s=612x612&w=0&k=20&c=t4aK_TKnYaGQcPAC5Zyh46qqAtuoPcb-mjtQax3_9Xc="
                />
              </Dropdown.Trigger>
            </Navbar.Item>
            <Dropdown.Menu
              aria-label="User menu actions"
              color="secondary"
              onAction={(actionKey) => console.log({ actionKey })}
            >
              <Dropdown.Item key="profile" css={{ height: "$18" }}>
                <Text b color="inherit" css={{ d: "flex" }}>
                  Signed in as
                </Text>
                <Text b color="inherit" css={{ d: "flex" }}>
                  zoey@example.com
                </Text>
              </Dropdown.Item>
              <Dropdown.Item key="settings" withDivider>
                {/* 用Next.js的Link替换NextUI的Link */}
                <Link href="/Account">Account</Link>
              </Dropdown.Item>
              <Dropdown.Item key="logout" withDivider color="error">
                Log Out
              </Dropdown.Item>
            </Dropdown.Menu>
          </Dropdown>
        </Navbar.Content>
        <Navbar.Collapse>
          {collapseItems.map((item, index) => (
            <Navbar.CollapseItem
              key={item}
              activeColor="secondary"
              css={{
                color: index === collapseItems.length - 1 ? "$error" : "",
              }}
              isActive={index === 2}
            >
              <Link
                color="inherit"
                css={{
                  minWidth: "100%",
                }}
                href={(item=='Home')?"/":`/${item}`}
              >
                {item}
              </Link>
            </Navbar.CollapseItem>
          ))}
        </Navbar.Collapse>
      </Navbar>
    </Layout>
  );
}

2. 持久化Context状态 #

将登录状态和用户信息存储到localStorage，在Context初始化时读取，防止页面意外刷新时丢失状态。

修改blogState.tsx：

import BlogContext from "./blogContext";
import { useState, useEffect } from 'react';

const BlogState = (props: { children: React.ReactNode }) => {
    // 初始化时从localStorage读取状态
    const [Login, SetLogin] = useState(() => {
      if (typeof window !== 'undefined') {
        return localStorage.getItem('isLoggedIn') === 'true';
      }
      return false;
    });
    const [userDetail, setUserDetail] = useState(() => {
      if (typeof window !== 'undefined') {
        const savedUser = localStorage.getItem('userDetail');
        return savedUser ? JSON.parse(savedUser) : {};
      }
      return {};
    });

    function setLogin(val: boolean) {
        SetLogin(val);
        // 更新localStorage
        if (typeof window !== 'undefined') {
          localStorage.setItem('isLoggedIn', String(val));
        }
    }
    function setUserDetails(val: any) {
        setUserDetail(val);
        // 更新localStorage
        if (typeof window !== 'undefined') {
          localStorage.setItem('userDetail', JSON.stringify(val));
        }
    }

    useEffect(() => {
      console.log(Login)
      console.log(userDetail)
    }, [Login, userDetail])

    return (
        <BlogContext.Provider value={{ setUserDetails, setLogin, Login, userDetail }}>
            {props.children}
        </BlogContext.Provider>
    )
}

export default BlogState

3. 登录后跳转优化（可选） #

登录成功后，使用Next.js的useRouter进行客户端跳转，避免手动刷新：

// 在登录组件中导入useRouter
import { useRouter } from 'next/navigation';

const LoginComponent = () => {
  const router = useRouter();
  // ...其他状态定义

  function LoginUser(){
    // ...表单校验逻辑
    setLoding(true);
    axios.post("/api/Users/Login", {email, password})
    .then((res: any) => {
      // ...错误判断逻辑
      setLoding(false);
      setLogin(true);
      setUserDetails(res.data);
      // 客户端跳转到首页
      router.push('/');
    }).catch(e => console.log(e))
  }

  // ...组件渲染逻辑
}

验证要点 #

• 所有页面跳转必须使用next/link或useRouter的客户端导航方式
• 状态修改时同步更新localStorage，初始化时读取
• 避免使用普通<a>标签或非Next.js的路由组件进行跳转

内容的提问来源于stack exchange，提问作者Ankit Kumar