passing props on react route change

Question

Home.js

class Home extends Component {

    handleClick = () => {
        hashHistory.push('/about')
    }

About.js

Is there a way to send props from Home to About when the route is changed?

Maybe something similar to sending props to a child component like so:

<About name="Sara" />

check this answer, https://stackoverflow.com/questions/44121069/how-to-pass-parameters-with-history-push-in-react-router-v4/45263164#45263164 instead of history.push which is used in the answer, you can do the same with browserHistory as well — Shubham Khatri, Aug 17 '17 at 13:31

score 1 · Accepted Answer · answered Aug 17 '17 at 13:34

1

You can use history.push not only to change the pathname, but also to add state, a searchquery or a hash.

class Home extends Component {

    handleClick = () => {
        history.push({
            pathname: '/about'
            state: { name: "Sara"}
        }
    }
}

You could also use the search:

class Home extends Component {

    handleClick = () => {
        history.push('/about?name=sara')
    }
}

Depending on if you want to have the information in the url.

Then it becomes usable in your route:

this.props.location.state

or

this.props.location.search

check the docs for more details.

answered Aug 17 '17 at 13:34

joeydebreuk

376
2
8

By `history.push` u mean `hashHistory.push`? I could only get it to work with `hashHistory.push` – Cristian Muscalu Aug 17 '17 at 14:06
Now I see you are using v3 of react-router, tbh I dont know much about that. I dont know what exactly what will work/wont work. But if it worked with hashHistory.push that's great :). Also managed to read the state in your new route? – joeydebreuk Aug 17 '17 at 14:44
tbh dont know much about hashHistory either – joeydebreuk Aug 17 '17 at 14:45

passing props on react route change

1 Answers1