title: Prevent user from going to profile page
body: <p>So I need to prevent the user from going back to the profile page (/profile) after he already selected a profile.
  I'm storing the profile selected inside the application state.</p>
  <p>Scenario wanted: User goes to /profile, select a profile, then goes to '/' (which is my home), and can navigate to /exams if he wants.
  BUT, he can't go back to /profile, since he's already inside the application with a profile stored in the state. If he tries to go to /profile, through browser back-arrow or even typing /profile in the url, the current page simply reloads.</p>
  <p>What's the best way to achieve this?</p>
  <p>OBS: this <strong>const { id } = useSelector...</strong> is the const that retrieves the profile from the state, so I have to use this as condition, but I don't know how.</p>
  <p>Therefore, if the user have an id that's not empty (which means he already selected a profile), he can't go back to profile. Other than that, he can visit /profile.</p>
  <p>Below follows my route.tsx :</p>
  <pre><code>const Exams = lazy(() =&gt; import('../pages/private/Exams'));
  const Home = lazy(() =&gt; import('../pages/private/Home'));
  const ProfileSelector = lazy(() =&gt; import('../pages/private/ProfileSelector'));
  const { id } = useSelector((state: RootState) =&gt; state.profile);
  
  const AppRoutes = () =&gt; {
      return (
          &lt;Router history={history}&gt;
              &lt;Suspense fallback={&lt;LoadingPage /&gt;}&gt;
                  &lt;Switch&gt;
                      &lt;Route exact path={'/'} component={Home} /&gt;
                      &lt;Route exact path={'/exams'} component={Exams} /&gt;
                      &lt;Route exact path={'/profile'} component={ProfileSelector} /&gt;
                  &lt;/Switch&gt;
              &lt;/Suspense&gt;
          &lt;/Router&gt;
      );
  };
  
  export default AppRoutes;
  </code></pre>
  <p>My profile store if there's any use:</p>
  <pre><code>    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&lt;UserProfileModel&gt;) =&gt; {
              return {
                  ...state,
                  ...action.payload,
              };
          },
          clearProfile: () =&gt; initialState,
      },
  });
  
  export const { selectProfile, clearProfile } = userProfileSlice.actions;
  
  export default userProfileSlice.reducer;
  </code></pre>