React.js pass parameters with Router not in URL

Question

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.com/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. ``)? Please share your link to a jsfiddle or jsbin. — rxgx, Jan 12 '15 at 00: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, Jan 13 '15 at 07:46
@Hummlas yes hummlas I only want to pass it to realestatesPrefiltered route. — Piotr Leniartek, Jan 13 '15 at 21:18
possible duplicate of [react-router - pass props to handler component](http://stackoverflow.com/questions/27864720/react-router-pass-props-to-handler-component) — Jim G., Sep 23 '15 at 16:30

score 5 · Answer 1 · answered Jan 16 '15 at 06:13

The 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 component 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 component? You could use a Flux store for this, or you could just set up a global event and have this component watch for changes.

score 2 · Answer 2 · answered Sep 07 '18 at 16:23

2

you can use state in history, like this

history.push({
  pathname: '/about',
  search: '?the=search',
  state: { some: 'state' }
})

answered Sep 07 '18 at 16:23

Mas Dan

31
2

score 0 · Answer 3 · answered Apr 24 '19 at 08:37

0

In your first component, you can trigger this onCick of a link or button

browserHistory.push({
    pathname: `/about`,
    search : 'search'
    state: {
        type: 'type'
    }
});

In your other component, you can now grab them like:

constructor(props) {
    super(props);
    this.state = {
        search: props.location.search,
        type: props.location.state.type
    }
}

answered Apr 24 '19 at 08:37

Dennis Mwagiru

99
1
3

this doesn't work as OP describes, since props.location.state will be undefined if the page is refreshed, or is accessed directly – Tycholiz Sep 15 '19 at 15:29
@Tycholiz, You can always persist state in local storage. All you need to handle is the initial load when `props.location.state` is null – Dennis Mwagiru Sep 17 '19 at 04:54

React.js pass parameters with Router not in URL

3 Answers3

Linked