尝试注册或登录时与 React.js 私有路由相关的问题

Question

I am getting this error "Cannot update a component ( BrowserRouter ) while rendering a different component ( Login ). To locate the bad setState() call inside Login " whenever I try to signUp or log in. I think this is occurring because of react router. But i couldn't find where I messed up. Here is the code (index.js).

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<BrowserRouter>
<React.StrictMode>
<App />
</React.StrictMode>
</BrowserRouter>
 );
 reportWebVitals();

Here is App.js

import "./App.css";
import Header from "./Components/Shared/Header/Header";
import "bootstrap/dist/css/bootstrap.min.css";
import Footer from "./Components/Shared/Footer/Footer";
import { Route, Routes } from "react-router-dom";
import Home from "./Components/Pages/Home/Home";
import Login from "./Components/Pages/Login/Login";
import Register from "./Components/Pages/Login/Register";
import Contact from "./Components/Pages/Contact/Contact";
import NotFound from "./Components/Pages/NotFound/NotFound";
import Blogs from "./Components/Pages/Blogs/Blogs";
import Manage from "./Components/Pages/Manage/Manage";
import Add from "./Components/Pages/Add/Add";
import Myitems from "./Components/Pages/Myitems/Myitems";
import SingleInventory from "./Components/Pages/SingleInventory/SingleInventory";
import RequireAuth from "./Components/RequireAuth";

function App() {
return (
<div>
  <Header></Header>
  <Routes>
    <Route path="/" element={<Home></Home>}></Route>
    <Route
      path="/products/:id"
      element={
        <RequireAuth>
          <SingleInventory></SingleInventory>
        </RequireAuth>}
    ></Route>
    <Route path="/manage" element={<Manage></Manage>}></Route>
    <Route path="/add" element={<Add></Add>}></Route>
    <Route path="/myitems" element={<Myitems></Myitems>}></Route>
    <Route path="/blogs" element={<Blogs></Blogs>}></Route>
    <Route path="/contact" element={<Contact></Contact>}></Route>
    <Route path="/login" element={<Login></Login>}></Route>
    <Route path="/register" element={<Register></Register>}></Route>
    <Route path="*" element={<NotFound></NotFound>}></Route>
  </Routes>
  <Footer></Footer>
  </div>
     );
   }

export default App;

Here Login.js

import { Icon } from "@iconify/react";
import React, { useState } from "react";
import { Button, Form } from "react-bootstrap";
import {
useSignInWithEmailAndPassword,
useSignInWithFacebook,
useSignInWithGoogle,
}   from "react-firebase-hooks/auth";
import { Link, useLocation, useNavigate } from "react-router-dom";
import auth from "../../../firebase.init";
import logo from "../../../images/login.svg";

const Login = () => {
const navigate = useNavigate();
const location = useLocation();

const from = location.state?.from?.pathname || "/";


const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [signInWithEmailAndPassword, user, loading, error] =
useSignInWithEmailAndPassword(auth);

const [signInWithGoogle, gUser, gLoading, gError] = useSignInWithGoogle(auth);
const [signInWithFacebook, fbUser, fbLoading, fbError] =
useSignInWithFacebook(auth);

const handleFormSubmit = (e) => {
e.preventDefault();
signInWithEmailAndPassword(email, password);
};

 const handleGoogleLogin = () => {
   signInWithGoogle();
  };
 const handleFbLogin = () => {
  signInWithFacebook();
 };
 if (user || fbUser|| gUser) {
 navigate(from, { replace: true });
 }
 return (
 <div style={{ minHeight: "100vh" }} className="d-flex">
  <div className="w-50 border border-1 d-flex align-items-center justify-content-center bg- 
  warning">
    <img className="w-50" src={logo} alt=""/>
  </div>
  <div className="w-50 d-flex align-items-center justify-content-center ">
    <div className="w-75 border border-1 p-5">
      <h1 className="d-inline-block pb-2 mb-4 border-1 border-dark border-bottom">
        Log in
      </h1>
      <Form className=" mx-auto" onSubmit={handleFormSubmit}>
        <Form.Group className="mb-3" controlId="formBasicEmail">
          <Form.Label>Email address</Form.Label>
          <Form.Control
            type="email"
            name="email"
            placeholder="Enter email"
            onBlur={(e)=>setEmail(e.target.value)}
          />
        </Form.Group>

        <Form.Group className="mb-3" controlId="formBasicPassword">
          <Form.Label>Password</Form.Label>
          <Form.Control
            type="password"
            name="password"
            placeholder="Password"
            onBlur={(e)=>setPassword(e.target.value)}
          />
        </Form.Group>
        <p className="text-end">Forget password</p>
        <Button className="w-100" variant="primary" type="submit">
          Log in
        </Button>
      </Form>
      <p className="text-center">
        Don't have an account?
        <Link className="text-decoration-none" to="/register">
          Sign Up
        </Link>
      </p>
      <div className="text-center ">
        <Icon onClick={handleGoogleLogin} icon="logos:google-icon" />
        <Icon
          onClick={handleFbLogin}
          className="text-primary"
          icon="fa6-brands:facebook"
        />
        <Icon icon="logos:github-icon" />
      </div>
    </div>
  </div>
</div>
     );
  };

  export default Login;

Answer 1

It's because you try to navigate out in the open within the Login component.

if (user || fbUser|| gUser) {
 navigate(from, { replace: true });
 }

By invoking navigate here, you're causing an update in the navigation context, which in turn can trigger a rerender while Login is still rendering. To avoid this, you want to use a useEffect hook so that this is checked after the first render/as a side effect.

Wrap it in a useEffect to only navigate when one of those values changes:

useEffect(() => {
 navigate(from, { replace: true });
}, [user, fbUser, gUser]);