Passing additional parameters in React Router

Question

How can I pass additional parametrs to the component that I am transitioning to.

I have my routes.js as follows. I have declared two paths one for authorList and another for a particluar author's details.

var routes = (
    <Route path="/" component={require('./components/main')}>        
        <Route path="authors" component={require('./components/authors/authorPage')}/>
        <Route path="authors/:authorId" component={require('./components/authors/AuthorDetails')}/>
    </Route>
);

module.exports = routes;

And in my authorList Page there is function as follows.

showAuthorDetails(authorId) {            

    var myExtraParams = { key1 : val1, key2 : val2};
    hashHistory.push(`/authors/${authorId});     
}

Now In my AuthorDetail page I can get authorId by doing

this.props.params.authorId

But I also want to pass myExtraParams as an object but don't want to declare and pass it in the url. I want to somehow access myExtraParams in the new component, perhaps say like by doing

this.props.params.myExtraParams

should give mt the object. (Like the way it happens in Angular UI router by using stateParams)

How can I do that?

Answer 1

you could try and change the structure of your routes a bit like so:

var routes = (
    <Route path="/" component={require('./components/main')}>        
        <Route path="authors" component={require('./components/authors/authorPage')}>
            <Route path="author/:authorId" component={require('./components/authors/AuthorDetails')}/>
        </Route>
    </Route>
);

Then in your authorList Page you could do

...
renderAuth() {
    if (this.props.children === null) {
        return(
            ....your default authorList
        )
    } else {
        return React.cloneElement(this.props.children || <div />, {myExtraParams: myExtraParams});
    }
}

render() {
    <div>
        {this.renderAuth()}
    </div>
}

showAuthorDetails(authorId) {            
    hashHistory.push(`/authors/author/${authorId});     
}
...

You should then be able to access this.props.myExtraParams in your authorsDetail page

Answer 2

I am looking at this question. Maybe I am late and you already have got the solution but in case if not then you can simply do this by

router.push({
  pathname: '/some-route',
  search: '?param=123',
  state: {
    additionalParam: 'value',
  },
})}

And on the receiving component side, you will get it as

this.props.location.state.additionalParam

I hope it helps. In the case of any further help, feel free to let me know.

Thanks