-1

How to properly handle success page behaviors?

After Sign Up, I have to show a Sign Up Success page.

What I've tried so far:

1. The same route for the SignUp Form and SignUp Success Page so if they enter the /sign-up route, Sign Up form will show up.

In my SignUp Component, the view is dependent on the sign up status,

if signUp === success render Success Page
else render Sign Up Form

The problem with this is that there is a Sign Up button in the header on the same page and if I click that, it remains in the success view since the sign up and success shares one route.

<Button onClick={this.navigateToSignUp} />

2. Made another route for SignUp Success Page

I made a separate route for sign up success page (/sign-up-success) but I don't want the users to be able to manually access the route since it should only show after a successful registration.

Dharman
  • 21,838
  • 18
  • 57
  • 107
Mahar
  • 21
  • 6
  • 2
    what have you tried so far? – Robert Dec 17 '19 at 08:59
  • A simple solution would be to add a `flag` after the user has registered. Or maybe you have a way to verify that. And check that flag, if true let user remain on page, if not, redirect. Or just use conditional routing https://stackoverflow.com/questions/48497510/simple-conditional-routing-in-reactjs . There are many solutions. Try one and come back if it doesn't work and show us what you've tried – Mihai T Dec 17 '19 at 09:01
  • You will need to pass any flag through its action trigger/parent page through code. Dont pass any flag thr url. – Tejas Dec 17 '19 at 09:01
  • 2
    It sounds like the route does need authentication. You can protect a route through this pattern https://reacttraining.com/react-router/web/example/auth-workflow – tony Dec 17 '19 at 09:07
  • @Robert I edited my post to make my question clearer. Thank you – Mahar Dec 18 '19 at 02:25

1 Answers1

1

It looks like you want give page to load through script and not through link itself. Try below hack. You can easily pass state through link or history.push() . So pass some boolean value through the state and use that state value to verify whether the link is loaded through manually(through input,no state) or automatically(redirection by you code,yes state). 

this.props.location.state

gives the passed state object in your success page

prasid444
  • 295
  • 1
  • 10