Programmatically set params in React Router v4

3
votes

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?

4
reactjsreact-router
Directly with react router No you can check this way but if you find yourself writing this a lot you can always write an Utils function to do the job. – Ryad Boubaker

4 Answers

6
votes

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.

1
votes

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"})
});
0
votes

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' ));
-1
votes

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).