Add Query Params to Current Url in React Router?

Question

I am using react router 4 and when some checkboxes are checked I want to update the current url with the values from the checkbox.

How can I push parameters to the current url? Also if possible I don't really want to support it that if they click the back button it would uncheck the last option (unless I pretty much get this functionality for free).

So I am thinking it would have to be more a replacement of the url rather that push.

Ayushya · Accepted Answer · 2018-09-18 18:41:20Z

2

Install history package from npm

Create a new file config/history.js

import createHistory from 'history/createBrowserHistory';
export default createHistory();

Now in your code where you wanted to update the url, use the following:

import history from './config/history';

....
<input type="checkbox" onChange={() => history.push('/foo?variable=value') } />

answered Sep 18, 2018 at 18:41

Ayushya

1,9451 gold badge12 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sasha Over a year ago

history.replace(url) seems to better fit the question (instead of history.push(url))

Collectives™ on Stack Overflow

Add Query Params to Current Url in React Router?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related