0

Requirement is to pass certain data to a component which will get rendered on a route change (programatically). Current I am using push from 'react-router-redux' without passing any data.

So I am navigating to /Animal and passing particular animals detail in data I want URl to show http://localhost/Animal

I am using React router 4.

import {push} from 'react-router-redux';

export function changeRoute(newRoute, data) {
    return (dispatch) => dispatch(push(newroute));
}

How can this be achieved?

learner
  • 1,952
  • 7
  • 33
  • 62
  • Why don't you just use the `` component, as you can specify the url with parameters? – Mikkel Sep 29 '17 at 12:37
  • I don't want url to show those parameters, also I need it to be done on a button click. – learner Sep 29 '17 at 12:54
  • ok, but you didn't state that as a requirement. You could still use the redirect component and store the data in redux – Mikkel Sep 29 '17 at 13:02
  • But is it advisable for one page to directly change state of another component which is not even yet loaded. – learner Sep 29 '17 at 13:13
  • No it can't change the state yet anyway, my suggestion is like what @palsrealm has suggested, to store the data in redux, redirect to the Animal component, which then retrieves the data it is expecting – Mikkel Sep 29 '17 at 22:28

1 Answers1

0

You should pass the data using an action from your page and retrieve it using the appropriate reducer from the Animal page. 

animalActions.setData(data);
animalActions.changeRoute(newRoute);

In in the Animal page,

mapStateToProps =(state)=>{
    return{
     animalData:animalReducer.data
          }
}

Then you can access the data using props.

palsrealm
  • 5,083
  • 1
  • 20
  • 25
  • I'm sorry if my answer was not useful. Guess i did not understand the question. My apologies. – palsrealm Sep 29 '17 at 20:00
  • thanks for answering, but am just wondering if we can't set state in the location attribute of router and then access it from there? Something like one mentioned here https://stackoverflow.com/questions/42173786/react-router-pass-data-when-navigating-programatically? Is it available in react router 4 – learner Sep 30 '17 at 05:25