javascript - Warning: Cannot update a component (`BrowserRouter`) while rendering a different component (`FormSocialIcon`) - Sta

admin管理员组

文章数量:1401184

I am getting warning [ Cannot update a ponent (BrowserRouter) while rendering a different ponent (FormSocialIcon).] while login.How to solve this warning?

FormSocialIcon ponent

const FormSocialIcon = () => {
const [signInWithGoogle, user, loading, error] = useSignInWithGoogle(auth);

const navigate = useNavigate();
let location = useLocation();

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

let errorMessage;
if (error) {
    errorMessage =
        <div>
            <p className='text-red-500 font-bold'>Error: {error.message}</p>
        </div>
}
if (loading) {
    return <Loader></Loader>
}

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

return (
    <div>
        <div className='flex justify-center items-center mt-3'>
            <div className='bg-indigo-600 w-60 h-0.5'></div>
            <div className='mx-2 font-semibold'>Or</div>
            <div className='bg-indigo-600 w-60 h-0.5'></div>
        </div>
        <div>
            {errorMessage}
            <button onClick={() => signInWithGoogle()} className='w-full md:w-96 flex justify-center mt-5 mx-auto p-2 border-2 border-indigo-500 rounded font-semibold outline-none hover:font-bold hover:transition-all hover:scale-110'>Continue with google<img className='w-5 ml-2' src={googleIcon} alt="" /></button>
        </div>
    </div>
);

};

I am getting warning [ Cannot update a ponent (BrowserRouter) while rendering a different ponent (FormSocialIcon).] while login.How to solve this warning?

FormSocialIcon ponent

const FormSocialIcon = () => {
const [signInWithGoogle, user, loading, error] = useSignInWithGoogle(auth);

const navigate = useNavigate();
let location = useLocation();

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

let errorMessage;
if (error) {
    errorMessage =
        <div>
            <p className='text-red-500 font-bold'>Error: {error.message}</p>
        </div>
}
if (loading) {
    return <Loader></Loader>
}

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

return (
    <div>
        <div className='flex justify-center items-center mt-3'>
            <div className='bg-indigo-600 w-60 h-0.5'></div>
            <div className='mx-2 font-semibold'>Or</div>
            <div className='bg-indigo-600 w-60 h-0.5'></div>
        </div>
        <div>
            {errorMessage}
            <button onClick={() => signInWithGoogle()} className='w-full md:w-96 flex justify-center mt-5 mx-auto p-2 border-2 border-indigo-500 rounded font-semibold outline-none hover:font-bold hover:transition-all hover:scale-110'>Continue with google<img className='w-5 ml-2' src={googleIcon} alt="" /></button>
        </div>
    </div>
);

};

• javascript
• node.js
• reactjs
• firebase
• react-router

Share Improve this question Follow asked May 8, 2022 at 10:53 Sami Al ZaberSami Al Zaber 3111 silver badge22 bronze badges 1

• Does this answer your question? Cannot update a ponent (`BrowserRouter`) while rendering a different ponent (`Login`) – Trenton McKinney Commented Aug 25, 2022 at 20:41

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

So I had been struggling with the same issue and I think it would work using the 'useEffect()' hook. It would end up looking something like this.

// Replace this:
if (user) {
    navigate(from, { replace: true });
}
// With this
useEffect(()=>{
if (user) {
    navigate(from, { replace: true });
}
},[navigate,user])

There are probably better ways of doing this, but this worked for me.

In my opinion a better solution to avoid this kind of problem and to be sure you will not try to render the last part of your code, is to use the Navigate ponent

import { Navigate } from "react-router-dom";

if (user) {
 return <Navigate to={from} replace={true}>
}

本文标签：