I want to use single route for two dashboard in React

Question

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;

Answer 1

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 />} />
)}