CODEWITHSUNDEEP
reactjsreact-router
kay
kay

Reputation: 1429

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

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?

Upvotes: 17

Views: 47948

Answers (4)

Gabriel Petersson
Gabriel Petersson

Reputation: 10442

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>()

Upvotes: 3

Michael G
Michael G

Reputation: 582

if you don't want to lose state upon a page refresh you can use local storage:

handleSubmit() {
  localStorage.setItem('email',
  JSON.stringify(this.state.email));
               }

and then retrieve from local storage on any other page, perhaps in componentWillMount:

componentWillMount(){
  let email = '';
  if (localStorage && localStorage.getItem('email')) {
     email = JSON.parse(localStorage.getItem('email'));
    }
   this.setState({email: email})
}

Upvotes: 3

Rohith Murali
Rohith Murali

Reputation: 5669

What i have done to pass data without context object is by using history prop,

this.props.history.push({
             pathname:"/shopdetail",
             state:{
                 key:"value"
              }
            });

And in the ShopDetail component you can access the object like,

this.props.location.state.key

Upvotes: 12

kay
kay

Reputation: 1429

I figured it out.

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

and access state by:

  this.props.location.state.email

Upvotes: 41

Related Questions