我使用用户身份验证并使用react登录后，网页无法转到其他页面

Question

在我使用用户身份验证并登录后，即使我尝试将本地页面从 http://localhost:3000/home 更改为 http://localhost:3000/，网页也不会转到其他页面，它只会返回到 http:// /本地主机:3000/home。我尝试查看用户身份验证，但我似乎找不到问题，我 99% 确定这就是问题所在。只有当我注销更改页面时它才起作用，但一旦登录就不起作用

当我检查时，我的主页上会弹出此错误 popup.ts:287 Cross-Origin-Opener-Policy 策略会阻止 window.close 调用。 民意调查@popup.ts:287 显示另外 1 帧 显示较少 popup.ts:287 Cross-Origin-Opener-Policy 策略会阻止 window.close 调用。 民意调查@popup.ts:287 显示另外 1 帧 显示较少 popup.ts:47 Cross-Origin-Opener-Policy 策略将阻止 window.close 调用。 关闭@popup.ts:47 显示另外 1 帧 显示较少 popup.ts:47 Cross-Origin-Opener-Policy 策略将阻止 window.close 调用。这是弹出的错误消息。

header.js

import styled from "styled-components";
import { useDispatch, useSelector } from "react-redux";

import { useNavigate } from "react-router-dom";
import {
  selectUserName,
  selectUserPhoto,
  setUserLoginDetails,
  setSignOutState,
} from "../features/user/userSlice";
import { auth, provider } from "../firebase";
import { signInWithPopup } from "firebase/auth";
import { useCallback, useEffect } from "react";

const Header = (props) => {
  const dispatch = useDispatch();

  const navigate = useNavigate();
  const userName = useSelector(selectUserName);
  const userPhoto = useSelector(selectUserPhoto);

  const setUser = useCallback(
    (user) => {
      dispatch(
        setUserLoginDetails({
          name: user.displayName,
          email: user.email,
          photo: user.photoURL,
        })
      );
    },
    [dispatch]
  );
  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged(async (user) => {
      if (user) {
        setUser(user);
        navigate("/home");
      }
    });

    return () => unsubscribe();
  }, [userName, setUser, navigate]); // Include setUser and navigate in the dependency array

  const handleAuth = () => {
    if (!userName) {
      // Attempt to sign in
      signInWithPopup(auth, provider)
        .then((result) => {
          setUser(result.user);
        })
        .catch((error) => {
          // Consider using a more user-friendly way to display errors in production
          alert(error.message);
        });
    } else {
      // Attempt to sign out
      auth
        .signOut()
        .then(() => {
          dispatch(setSignOutState());
          navigate("/");
        })
        .catch((error) => {
          // Consider using a more user-friendly way to display errors in production
          alert(error.message);
        });
    }
  };

  // console.log(userPhoto);
  return (
    <Nav>
      <Logo>
        <img src="images/logo.svg" alt="Disney+" />
      </Logo>
      {
        // If the user is logged in, display the user's photo and name
        !userName ? (
          <Login onClick={handleAuth}>Login</Login>
        ) : (
          <>

thia 是我的路由 app.js

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Login from "./components/Login";
import Header from "./components/Header";
import "./App.css";
import Home from "./components/Home";
import Detail from "./components/Detail";

function App() {
  return (
    <div className="App">
      <Router>
        <Header />
        <Routes>
          <Route exact path="/" element={<Login />} />
          <Route exact path="/home" element={<Home />} />
          <Route exact path="/detail/:id" element={<Detail />} />
        </Routes>
      </Router>
    </div>
  );
}

export default App;

所以我的应用程序在登录页面上启动其 localhost:3000 然后当我登录时它会将我带到主页 localhost:3000/home 我使用用户身份验证通过 firebase 使用 google 帐户登录，当我在我的主页上时，如果我尝试转到另一个页面，它只会带我回到主页，例如：如果我单击一个应该带我进入另一个页面的组件，它不会只停留一秒钟并带我返回主页，如果我输入网站网址，例如：localhost:3000/detail，它不会带我到该页面。如果需要更多信息，请告诉我

Answer 1

尝试将你的 useEffect 替换为一个：

useEffect(() => {
  const unsubscribe = auth.onAuthStateChanged(async (user) => {
    if (user) {
      setUser(user);
      // Only navigate to /home if the current path isn't already /home
      // This prevents unnecessary redirections if the user is already logged in
      if (window.location.pathname !== '/home') {
        navigate("/home");
      }
    }
  });

  return () => unsubscribe();
}, [setUser, navigate]); // Removed userName from dependencies to avoid redirection on every userName change