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?

use react-router https://github.com/ReactTraining/react-router — JFAP, Oct 04 '16 at 08:17

score 40 · Accepted Answer · answered Oct 04 '16 at 10:30

40

I figured it out.

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

and access state by:

  this.props.location.state.email

answered Oct 04 '16 at 10:30

kay

1,369
4
15
27

Thank you so much for posting your answer, was having the same issue – wsfuller Jun 13 '17 at 00:03
@Full-Hybrid no problem! – kay Jun 13 '17 at 03:35
It's worth noting that context isn't stable or recommended in React. – Ryan Killeen Feb 18 '18 at 00:54
1

If the page is refreshed the state will be lost – Jay240692 Mar 15 '18 at 10:43
Does anybody know how to pass functions as props. I'm getting a DataCloneError – Young Scooter Jul 30 '19 at 21:17
This is similar to the solution if you were using `` rather than `[...].push`; as detailed by this [answer](https://stackoverflow.com/a/52064362/6333825) which also includes a link to the `react-router` documentation. – Concrete_Buddha Sep 19 '19 at 17:09
@Dan How do you do that when you wanna save this state to local state? Example `this.setState({email: this.props.location.state.email});`. I get an empty array, when I log it, but the props location state is not empty. – Engin Apr 14 '20 at 14:29

score 12 · Answer 2 · answered Jun 02 '18 at 05:12

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

score 3 · Answer 3 · answered Jul 30 '18 at 22:21

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

score 2 · Answer 4 · answered Nov 11 '21 at 15:53

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

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

4 Answers4

2021

Linked