I have set up a few pages that handle a new user account and edit profile functionality. After a user creates a new account on the SignUp page, they are immediately navigated to the AccountSetup page, which allows them to set up their profile and any additional information, such as About Me, Socials, Profile Photo, etc. Once they submit this page, they are then navigated to the UserProfile page. However, I want to limit the number of visits to the AccountSetup page to one visit, since a user should only have access to this route once after creating their account throughout the existence of their account. Additionally, I want to set up a conditional that if they try to navigate back to the AccountSetup path and they have already visited it once, they are automatically redirected to the EditProfile page.
My project is set up with React-Redux and Redux-Toolkit with Typescript.
<Router>
<Nav />
<Routes>
<Route path="/sign-up" element={<SignUp />} />
<Route path="users/:id/account-setup" element={<AccountSetup />} />
<Route path="/users/:id" element={<UserProfile />} />
<Route path="/users/:id/edit" element={<EditProfile />} />
</Routes>
</Router>
I was thinking of using a page navigation event in React, but not sure how I would implement it and set up a redirection to the EditProfile page if AccountSetup already had one visit
