Hi I want to move from one page to another and pass paramters search and type. Can I achieve this with react router without these parameters in the URL ?
I am looking at this .md#dynamic-segments and the solutions using <RouteHandler {...this.props}/> but it is not working until I pass params to the url.
Is there any solution for that ?
EDIT 1. Routes:
<Route name="app" path="/" handler={App}>
<Route name="realestates" handler={RealEstatesPage}/>
<Route name="realestatesPrefiltered" path="realestatesPrefiltered/:search/:type" handler=RealEstatesPage}/>
<Route name="realestate" handler={RealEstateDetails}/>
<DefaultRoute handler={MainPage}/>
</Route>
Hi I want to move from one page to another and pass paramters search and type. Can I achieve this with react router without these parameters in the URL ?
I am looking at this https://github./rackt/react-router/blob/master/docs/guides/overview.md#dynamic-segments and the solutions using <RouteHandler {...this.props}/> but it is not working until I pass params to the url.
Is there any solution for that ?
EDIT 1. Routes:
<Route name="app" path="/" handler={App}>
<Route name="realestates" handler={RealEstatesPage}/>
<Route name="realestatesPrefiltered" path="realestatesPrefiltered/:search/:type" handler=RealEstatesPage}/>
<Route name="realestate" handler={RealEstateDetails}/>
<DefaultRoute handler={MainPage}/>
</Route>
-
How and where are you defining your routes (e.g.
<Routes>)? Please share your link to a jsfiddle or jsbin. – rxgx Commented Jan 12, 2015 at 0:18 - Should it only be passed to certain routes? If not, perhaps you could store those values in some sort of application state? – Markus-ipse Commented Jan 13, 2015 at 7:46
- @rxgx I edited post with routes – Piotr Leniartek Commented Jan 13, 2015 at 21:15
- @Hummlas yes hummlas I only want to pass it to realestatesPrefiltered route. – Piotr Leniartek Commented Jan 13, 2015 at 21:18
- possible duplicate of react-router - pass props to handler ponent – Jim G. Commented Sep 23, 2015 at 16:30
3 Answers
Reset to default 5The link you mentioned outlines the two different strategies. First, dynamic segments are just parameterized URLs, where parameters are sent as part of the URL path instead of in the query string. So these would need to be publicly visible.
Second, you can use props. This is the only supported option for passing things down "behind the scenes." In addition, it's the preferred method in React. The question is, where can this happen?
One option is to pass the values in at the top-level, from within Router.run(). This is outlined in the link above, with each nested handler passing the props down, either explicitly, like <RouteHandler search={this.props.search} />, or wholesale using spread attributes like <RouteHandler {...props} />.
Since you only want it to happen for a subset of pages, you could use nested routes, wherein the parent route handler owns the properties in question as part of its state. It would then just pass them to every child as normal props in the same way as the above case.
For example, your route map might look like this:
<Route name="app" path="/" handler={App}>
<Route name="realestates" handler={RealEstatesPage}/>
<Route name="realestatesPrefiltered" handler={RealEstatePrefiltered}>
<Route name="homes" handler={RealEstateHouseDetails}/>
<Route name="apartments" handler={RealEstateHouseDetails}/>
<Route name="land" handler={RealEstateLandDetails}/>
</Route>
<Route name="realestate" handler={RealEstateDetails}/>
<DefaultRoute handler={MainPage}/>
</Route>
Then your RealEstatePrefiltered ponent might look like this:
RealEstatePrefiltered = React.createClass({
getInitialState: function () {
return { search: '', type: '' }; // Update from store or event.
},
render: function() {
return <div>
<RouteHandler search={this.state.search} type={this.state.type} />
</div>;
}
});
The only question left is, how do you change the state on this ponent? You could use a Flux store for this, or you could just set up a global event and have this ponent watch for changes.
you can use state in history, like this
history.push({
pathname: '/about',
search: '?the=search',
state: { some: 'state' }
})
In your first ponent, you can trigger this onCick of a link or button
browserHistory.push({
pathname: `/about`,
search : 'search'
state: {
type: 'type'
}
});
In your other ponent, you can now grab them like:
constructor(props) {
super(props);
this.state = {
search: props.location.search,
type: props.location.state.type
}
}