How to pass state/props when redirecting to another route in React?

Question

I have a signup form and after a user signs up, it will redirect to the email confirmation page(/confirmation) where a user types a confirmation code that I sent via an email. When a user submits a confirmation code, I want to send the code and a user's email to server-side.

My signup form code(simplified):

    constructor(props){
          super(props);
          this.state = {
             email: '',
             password: '',
             errors: {},
          }
       }
    handleSubmit(e){
        e.preventDefault();
        this.props.userSignup(this.state).then(
            () => {
               this.context.router.push({
                  pathname: '/confirmation'
               })
            },

         )
   }
   render(){ ...

I do not want to add any params to my path.
How can I pass this.state.email to confirmation page?

Answer 1

2021

You can also redirect by this component from react-router:

...
if (shouldRedirect) {
     return <Redirect to={"/some-path"} state={{ value: "hey"}}>
}
return <div>Welcome</div>

Then use it in the new component:

...
const location = useLocation()
const value = location.state.value

If you are using typescript, add types to the state as such:

interface State {
    value: string
}
const location = useLocation<State>()

Answer 2

I figured it out.

 this.context.router.push({
     pathname: '/confirmation',
     state: {email: this.state.email}  
 })

and access state by:

  this.props.location.state.email