React router renders the invalid component then renders valid component - reactjs

Question

Whenever I go the the path ("/") even if I am logged in, Signup component is loaded once for few second then Dashboard is shown same happens with redirecting how to solve it.
<Route
exact
path="/"
render={() => {
return loggedIn ? <Dashboard /> : <Signup />;
}}
/>
<Route
exact
path="/resetPassword"
render={() => {
return loggedIn ? (
<Redirect to="/" />
) : (
<ResetPassword/>
);
}}
/>
and I'm setting the login like this:
const cookieCheck = () => {
const mt = Cookies.get("rt");
if (mt === "" || mt === undefined) {
if (loggedIn) {
setLogin(false);
}
} else {
if (!loggedIn) {
setLoggedIn(true);
}
}
};
My complete code is as follows
import React, { Fragment, useState, useEffect, lazy, Suspense } from 'react';
import { Paper } from '#material-ui/core';
import Dashboard from './Components/Dashboard/Dashboard';
import LoadingPage from './Components/LoadingPage/main';
import ForgotPassword from './Components/ForgotPassword/Fp';
import Signup from './Components/Signup/Signup';
import Login from './Components/Login/Login';
import PageNotFound from './Components/404/Page.js';
import Activation from './Components/Activation/Activation';
import ResetPassword from './Components/ResetPassword/Reset';
import {
BrowserRouter as Router,
Route,
Switch,
Redirect,
} from 'react-router-dom';
import Cookies from 'js-cookie';
const App = () => {
const [login, setLogin] = useState(false);
const checkStatus = function () {
const mt = Cookies.get('t');
if (mt === '' || mt === undefined) {
setLogin(false);
} else {
setLogin(true);
// return true;
}
};
useEffect(() => {
const interval = setInterval(() => {
cookieCheck();
}, 1000);
return () => clearInterval(interval);
});
const cookieCheck = async () => {
const mt = await Cookies.get('rt');
if (mt === '' || mt === undefined) {
if (login) {
setLogin(false);
}
} else {
if (!login) {
setLogin(true);
}
}
};
console.log(login);
return (
<Router>
<Fragment>
<Paper elevation={0}>
<Switch>
<Route
path="/forgotpassword"
exact
component={ForgotPassword}
/>
<Route
exact
path="/login"
render={() => {
return login ? <Redirect to="/" /> : <Login />;
}}
/>
<Route
exact
path="/signup"
render={() => {
if (login) {
return <Redirect to="/" />;
} else {
return <Signup />;
}
}}
/>
<Route
exact
path="/"
render={() => {
return login ? (
<Dashboard />
) : (
<LoadingPage />
);
}}
/>
<Route
exact
path="/resetPassword/:code/:uid"
render={() => {
return login ? (
<Redirect to="/" />
) : (
ResetPassword
);
}}
/>
<Route
exact
path="/activation/:code/:uid"
component={Activation}
/>
<Route component={PageNotFound} />
</Switch>
</Paper>
</Fragment>
</Router>
);
};
export default App;

Answer 1

You need try something like this to add loading state to your component:
import React, { Fragment, useState, useEffect, lazy, Suspense } from "react";
import { Paper } from "#material-ui/core";
import Dashboard from "./Components/Dashboard/Dashboard";
import LoadingPage from "./Components/LoadingPage/main";
import ForgotPassword from "./Components/ForgotPassword/Fp";
import Signup from "./Components/Signup/Signup";
import Login from "./Components/Login/Login";
import PageNotFound from "./Components/404/Page.js";
import Activation from "./Components/Activation/Activation";
import ResetPassword from "./Components/ResetPassword/Reset";
import {
BrowserRouter as Router,
Route,
Switch,
Redirect,
} from "react-router-dom";
import Cookies from "js-cookie";
const App = () => {
const [login, setLogin] = useState(false);
const [loading, setLoading] = useState(true);
const checkStatus = function () {
const mt = Cookies.get("t");
if (mt === "" || mt === undefined) {
setLogin(false);
} else {
setLogin(true);
}
setLoading(false);
};
useEffect(() => {
const interval = setInterval(() => {
checkStatus();
}, 1000);
return () => clearInterval(interval);
}, []);
console.log(login);
const isLoginComponent = login ? <Dashboard /> : <LoadingPage />;
return (
<Router>
<Fragment>
<Paper elevation={0}>
<Switch>
<Route path="/forgotpassword" exact component={ForgotPassword} />
<Route
exact
path="/login"
render={() => {
return login ? <Redirect to="/" /> : <Login />;
}}
/>
<Route
exact
path="/signup"
render={() => {
if (login) {
return <Redirect to="/" />;
} else {
return <Signup />;
}
}}
/>
<Route
exact
path="/"
render={() => {
return loading ? <div>loading</div> : isLoginComponent;
}}
/>
<Route
exact
path="/resetPassword/:code/:uid"
render={() => {
return login ? <Redirect to="/" /> : ResetPassword;
}}
/>
<Route exact path="/activation/:code/:uid" component={Activation} />
<Route component={PageNotFound} />
</Switch>
</Paper>
</Fragment>
</Router>
);
};
export default App;
Read more about how cookies work here: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/cookies/get

Answer 2

I think this issue is you don't immediately check the cookie status when the component mounts. This coupled with login initial state false will render any login ? true : false false branch component until the first cookie check that returns valid authentication.
const [login, setLogin] = useState(false);
const checkStatus = function () {
const mt = Cookies.get('t');
if (mt === '' || mt === undefined) {
setLogin(false);
} else {
setLogin(true);
}
};
useEffect(() => {
const interval = setInterval(() => {
checkStatus(); // <-- not called for 1000ms
}, 1000);
return () => clearInterval(interval);
});
Solution
Need to also immediately invoke the cookie check function. I suggest also starting with a non-true/false state value so you know when the initial check is complete.
const [login, setLogin] = useState(null);
const checkStatus = function () {
const mt = Cookies.get('t');
if (mt === '' || mt === undefined) {
setLogin(false);
} else {
setLogin(true);
}
};
useEffect(() => {
const interval = setInterval(() => {
checkStatus();
}, 1000);
checkStatus(); // <-- also invoke first render
return () => clearInterval(interval);
});
Check for login === null and return null (or any pending/loading UI really), otherwise return the regular ternary.
<Route
exact
path="/"
render={() => {
if (login === null) return null;
return login ? (
<Dashboard />
) : (
<LoadingPage />
);
}}
/>