hay un segundo o dos que aparece la página incorrecta en la pantalla hasta que la solicitud me da el rol del usuario para que pueda mostrarle la página correcta. ¿Cómo puedo mostrarles la página correcta desde el primer momento?
La mejor manera es manejar el rol en el archivo App.js porque todas sus rutas están allí y luego puede especificar qué ruta debería estar disponible de acuerdo con sus roles. Como este ejemplo:
// 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> ) }Ahora la configuración y la administración de usuarios se representan si el tipo de usuario es igual a c o a.