Programmatically set params in React Router v4

Question

In React Router 4 I can define

<Route path="/calendar/:view/:year?/:month?/:day?" component={Calendar} />

to pass props from a URL to my Calendar component.

Inside the Calendar component, I want to programmatically set the URL params. The docs show how to do this using history.push(), but this requires you to format the URL yourself like history.push(``${view}/${year}/${month}/${day}``). But I want to update the URL without being coupled to the route structure, ideally something like history.push({ view: 'month', year: '2018' }).

Is this possible? It seems odd to me that React Router helps split up the URL into params, but doesn't provide a nice mechanism to set those params?

Directly with react router **No** you can [check this way](https://stackoverflow.com/questions/40161516/how-do-you-programmatically-update-query-params-in-react-router/40161954) but if you find yourself writing this a lot you can always write an Utils function to do the job. — Ryad Boubaker, Jun 05 '18 at 15:56

Mario Eis · Answer 1 · 2019-01-27T19:05:30.870

8

I do that by using match.path and generatePath. Here is an example:

this.props.history.push({
    pathname: generatePath(this.props.match.path, {orderId: "latest", orderItemId: "latest"})
});

You can read about it here https://reacttraining.com/react-router/core/api/generatePath and here https://reacttraining.com/react-router/core/api/match.

Thats the cleanest solution I found so far for preventing the route component from knowing to much about where it will be allocated later in the path structure. Maybe it fits your (or someone else's) need.

edited Jan 27 '19 at 19:05

answered Jan 27 '19 at 18:57

Mario Eis

2,724
31
32

I can confirm this working. Keep in mind that `generatePath` will encode special characters like `/`, so you might want to use `decodeURIComponent` if you, like me, do a catch-all of all path params that are passed. – itachi Nov 28 '19 at 14:15

score 1 · Answer 2 · answered Feb 15 '20 at 12:57

1

I would like to suggest that instead of history.push() as answered, you would use history.replace().

with replace you would not affect the history in case the user would want to navigate backward in the browser.

this.props.history.replace({
    pathname: generatePath(this.props.match.path, {orderId: "latest", orderItemId: "latest"})
});

answered Feb 15 '20 at 12:57

Liran Brimer

3,418
1
28
23

I think it's better to use push, because user's generally expect to use the back button to navigate back through the app – dhulme Feb 25 '20 at 16:44
I agree but in this case there is only params replacement in the current page, and not navigation between pages in the app – Liran Brimer Feb 25 '20 at 20:37
This should be a comment on Mario's answer. – tim-phillips Jul 29 '21 at 17:17

score 0 · Accepted Answer · answered Jun 06 '18 at 08:24

0

I managed to implement this using the path-to-regexp package that React Router uses:

this.props.history.push(pathToRegexp.compile(this.props.match.path)({ view: 'month', year: '2018' ));

answered Jun 06 '18 at 08:24

dhulme

159
1
2
10

2

Mind linking what package is ```pathToRegexp```? – Rafael 'BSIDES' Pereira Sep 27 '18 at 01:35
Currently doesn't work too well. If I pass ```view``` and ```month```, without a ```year```, it renders ```month``` in place of ```year```, like ```/calendar/view/month``` instead of ```/calendar/view/x/month``` – Rafael 'BSIDES' Pereira Sep 27 '18 at 02:19
In the end I switched to router5 :) – dhulme Oct 11 '18 at 08:14
@dhulme how does v5 handle this? – tim-phillips Jul 29 '21 at 17:22
@Rohmer I now use my own wrapper around react-router https://github.com/dhulme/react-router-extensions/blob/master/src/routing.ts – dhulme Jul 30 '21 at 16:21

score -1 · Answer 4 · answered Jun 05 '18 at 16:31

-1

I'm not sure if what you want is achievable, because if you pass the params to the react-router-dom, the params goes to the URL, but if you decouple the params with the URL structure, how will react-router know how to change the URL? The same URL may match multiple routes, with multiple params structures (and nested routes).

answered Jun 05 '18 at 16:31

Murilo Cruz

2,387
1
17
19

I meant that when the URL params come in as props into a component, they are decoupled from the URL structure as they are just an object. But when you update the URL, you can't pass in an object, you have to form the URL manually. – dhulme Jun 06 '18 at 08:25
This is not an answer. – tim-phillips Jul 29 '21 at 17:17

Programmatically set params in React Router v4

4 Answers4

Linked