Here, what I'm trying to do is to make React App with 2 dashboards. 1st, if kyc_status is true then react app should display <Home2> and 2nd, if kyc_status is false then <Dashboard> after login.

Using refresh_token api. I'm storing value of kyc_status in a state(kyc) and using conditional rendering, I'm checking which route react app should take.

But It's landing on <Dashboard> first, then re-route itself on <Home2> in case if kyc_status is true. I don't know it's prioritizing <Dashboard>.

Code Image

const DashboardLayout = () => {
  let navigate = useNavigate();
  const [kyc, setKyc] = useState();

  async function getUser() {
    getDataAPI("user/refresh_token").then(function (token) {
      if (token.data.accesstoken) {
        getDataAPI(`get_user/${token.data.user._id}`).then((res) =>
          setKyc(res.data.kyc_status)
        );
      }
    });
  }
  useEffect(() => {
    getDataAPI("user/refresh_token").then(function (res) {
      if (res.data.status == 0) {
        console.log(res.data.status);
        navigate("/login");
      }
    });

    getUser();
  }, []);
  return (
    <Fragment>
      <Header />
      <Routes>
        {kyc ? (
          <Route exact path="/" element={<Home2 />}></Route>
        ) : (
          <Route exact path="/" element={<Dashboard />}></Route>
        )}
      </Routes>
    </Fragment>
  );
};

export default DashboardLayout;

CodePudding user response：

One thing you can do is to have kyc as undefined first, and then when it loads, you would show whichever dashboard you would want to show.

Something like this:

const [kyc, setKyc] = useState(undefined);
...

{kyc === undefined ? (
    //Display some loading screen here
) : (
    <Route exact path="/" element={kyc ? <Home2 /> : <Dashboard />} />
)}