React.js pass parameters with Router not in URL

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.

you can use state in history, like this

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

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    }}