React登录后点击新链接自动返回登录页问题求助

你的问题核心是登录状态未持久化，加上变量引用可能存在错误，导致路由跳转后回到登录页面：

1. 修正渲染条件的变量引用 #

你的状态存在user对象中，但渲染逻辑用了name != ""做判断，这会导致判断逻辑失效。应改为判断user.name !== ""：

{(user.name !== "") ? (
  <>
    <Navbar />
    <div className='container'>
      <Routes>
        <Route path="/" element={<Home />}></Route>
        <Route path="/List" element={<List />}></Route>
      </Routes>
    </div>
  </>
) : (
  <Login Log={Log} error={error} />
)}

2. 持久化登录状态 #

React的useState状态在页面刷新、组件重新挂载时会重置为初始值。要解决这个问题，需要把登录状态存入localStorage：

初始化state时从localStorage读取 #

const [user, setUser] = useState(() => {
  const savedUser = localStorage.getItem('user');
  // 有保存的用户数据就复用，没有则用初始值
  return savedUser ? JSON.parse(savedUser) : {name: ""};
});

登录成功时同步保存到localStorage #

在你的Log方法中，更新状态的同时把用户数据存入localStorage：

const Log = (userData) => {
  setUser(userData);
  localStorage.setItem('user', JSON.stringify(userData));
};

3. 确保路由跳转是客户端跳转 #

Navbar里的链接必须使用React Router的<Link>组件，不能用原生<a>标签——原生a标签会刷新页面，导致状态重置：

// 正确写法
<Link to="/List">列表页面</Link>

// 错误写法（会触发页面刷新）
<a href="/List">列表页面</a>

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