Hey I am trying to make an UserRegistration System but when I try to login the user the console always give me this error

Warning: Cannot update a component (`BrowserRouter`) while rendering a different component (`Login`).

Here is my index.js :

import React from 'react';
import ReactDOM from 'react-dom';
import {
    BrowserRouter,
    Route,
    useNavigate,
    Routes as Switch,
} from 'react-router-dom';
import App from './App.jsx';
import Login from './screens/Login.jsx';
import Register from './screens/Register.jsx';
import Activate from './screens/Activate.jsx';
import ForgetPassword from './screens/ForgetPassword.jsx';
import ResetPassword from './screens/ResetPassword.jsx';
import 'react-toastify/dist/ReactToastify.css';
ReactDOM.render(
    <BrowserRouter>
        <Switch>
            {/* <Route path = '/plan' element = {<Plan/>}/>
        <Route path = '/usage' element = {<Usage/>}/>
        <Route path = '/documentation' element = {<Documentation/>}/>
        <Route path = '/invoices' element = {<Invoices/>}/> */}
            <Route path='/login' exact element={<Login />} />
            <Route path='/register' exact element={<Register />} />
            <Route
                path='/users/password/forget'
                exact
                element={<ForgetPassword />}
            />
            <Route
                path='/users/password/reset/:token'
                exact
                element={<ResetPassword />}
            />
            <Route path='/users/activate/:token' exact render={<Activate />} />
            <Route path='*' element={<App />} />
        </Switch>
    </BrowserRouter>,
    document.getElementById('root')
);

Here is the link for my login.jsx : https://pastebin.com/yUX9f51L

CodePudding user response：

I also got this error , I think it should solve by removing this in your code :

{isAuth() ? navigate('/') : null)

And use this :

useEffect(() => {
if(isAuth)
{
navigate('/')
} 
});

If you are also getting this warning :

You should call navigate() in a React.useEffect(), not when your component is first rendered

Then this can also be solved with this solution .

Hope it will solve the problem .