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>

Answer 1

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.

Answer 2

you can use state in history, like this

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