React.js what is the best technique to show to the user different pages according to there role

there a sec or two that the wrong page appears on the screen until the request get me the user’s role so i can show him the right page.
how can i show them the right page since the first moment

>Solution :

The best way is to handle the role is App.js File because all your route are there and then you can specifiy which route should be avalible according to thier roles.like this example:

// App.js 
function App() {
const [addUserManagment, setAddUserManagment] = useState({
   render: false,
   type: "",
});
useEffect(() => {
   const space = localStorage.getItem("space");
   if (space === "c" || space === "a") {
   setAddUserManagment({
      render: true,
      type: space,
   });
  }
}, []);
  return (
<div className="App">
  <Routes>
    <Route path="/">
      <Route index element={<Login />} />
      <Route path="forget-password" element={<ForgetPassword />} />
      <Route path="reset-password/:token" element={<RestPassword />} />
      <Route
        path="register/:campanyName/:companyId"
        element={<InviteRegister />}
      />
    </Route>
          <Route path="profile" element={<Profile />} />
      {addUserManagment.render && (
        <Route path="setting" element={<Setting />} />
      )}
      {addUserManagment.render && (
        <Route
          path="user-management"
          element={
            addUserManagment.type === "c" ? <UserList /> : <UserListAdmin />
          }
        />
      )}
    </Route>
   </Routes>
  )
}

Now settign and user-managment are rendered if type of user equal to c or a.