When the user signups into the application the data is saved to DB using an API that returns an access token. After this step user needs to be redirected to another page (Signup Details). I am using the below-attached code to do the same. Once I submit the button the token is returned and the URL is changed to the new one. But the page is not displayed. Kindly help me fix this issue.
The new page to which the user should be redirected.
App.js
You need to make the first route's url like this "/" instead of "*", because now it matches all routes.
<Route exact path="/" component={SignupForm} />
The path="*" matches literally any route, and since you are rendering the Route components into a Switch, only the first matching Route or Redirect is rendered.
Remember that within a Switch path order and specificity matters! If ordered correctly there is almost zero need to use the exact prop. Order the routes by path in inverse path specificity, i.e. both "/SignupDetails" and "/Signup" are more specific than "/" and should appear higher in the Switch.
<Router>
<Switch>
<Route path="/SignupDetails" component={SignupDetailsForm} />
<Route path="/Signup" component={SignupForm} />
<Route path="/" component={SignupForm} />
</Switch>
</Router>
react-router-dom v6 Route path prop can also take an array of paths, so you can make your code a bit more DRY if you like. Keep in mind that path order and specificity also still matters in the array.
<Router>
<Switch>
<Route path="/SignupDetails" component={SignupDetailsForm} />
<Route path={["/Signup", "/"]} component={SignupForm} />
</Switch>
</Router>