Por lo tanto, debo evitar que el usuario regrese a la página de perfil (/perfil) después de haber seleccionado un perfil. Estoy almacenando el perfil seleccionado dentro del estado de la aplicación.

Escenario buscado: el usuario va a /perfil, selecciona un perfil, luego va a '/' (que es mi casa) y puede navegar a /exámenes si lo desea. PERO, no puede volver a /profile, ya que ya está dentro de la aplicación con un perfil almacenado en el estado. Si intenta ir a /profile, a través de la flecha hacia atrás del navegador o incluso escribiendo /profile en la URL, la página actual simplemente se vuelve a cargar.

¿Cuál es la mejor manera de lograr esto?

OBS: esta const { id } = useSelector... es la const que recupera el perfil del estado, así que tengo que usar esto como condición, pero no sé cómo.

Por lo tanto, si el usuario tiene una identificación que no está vacía (lo que significa que ya seleccionó un perfil), no puede volver al perfil. Aparte de eso, puede visitar /profile.

A continuación sigue mi route.tsx:

 const Exams = lazy(() => import('../pages/private/Exams')); const Home = lazy(() => import('../pages/private/Home')); const ProfileSelector = lazy(() => import('../pages/private/ProfileSelector')); const { id } = useSelector((state: RootState) => state.profile); const AppRoutes = () => { return ( <Router history={history}> <Suspense fallback={<LoadingPage />}> <Switch> <Route exact path={'/'} component={Home} /> <Route exact path={'/exams'} component={Exams} /> <Route exact path={'/profile'} component={ProfileSelector} /> </Switch> </Suspense> </Router> ); }; export default AppRoutes;

Mi tienda de perfil si hay algún uso:

 interface UserProfileModel { id: string; council: string; state: string; number: string; description: string; } const initialState: UserProfileModel = { id: '', council: '', state: '', number: '', description: '', }; export const userProfileSlice = createSlice({ name: 'profile', initialState, reducers: { selectProfile: (state, action: PayloadAction<UserProfileModel>) => { return { ...state, ...action.payload, }; }, clearProfile: () => initialState, }, }); export const { selectProfile, clearProfile } = userProfileSlice.actions; export default userProfileSlice.reducer;