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?

you could pass your params as props as shown in this example — ieldanr
– ieldanr, Commented Mar 17, 2016 at 16:29

deowk · Accepted Answer · 2016-03-17 14:09:49Z

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

Rohan Jalil · Accepted Answer · 2017-07-05 16:05:28Z

1

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

answered Jul 5, 2017 at 16:05

Rohan Jalil

413 bronze badges

Collectives™ on Stack Overflow

Passing additional parameters in React Router

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related