Update dynamic param in URL React Router 5

Question

I'm looking for a way to reliably update a dynamic param in a URL with React Router 5.

My webpage has a global select component that allows to switch between different organizations and the URL can have multiple IDs in it.

The URL may look something like this https://www.baseurl.com/organization/:orgId/site/:siteId/user/:userId

So I need to change the :orgId param when the select value changes. Does React Router 5 provide a good way to do that (useLocation and useParams doesn't seem to have an API for that) or should I manipulate the URL string manually in such case?

Drew Reese · Accepted Answer · 2022-12-14 08:08:57Z

2

You may be able to use the useParams hook and combine it with the generatePath utility function.

Example:

import { generatePath, useParams } from 'react-router-dom';

...

const params = useParams(); // { orgId, siteId, userId }

...

const path = generatePath(
  "/organization/:orgId/site/:siteId/user/:userId",
  {
    ...params,       // <-- shallow copy in the existing param values
    orgId: newOrgId, // <-- override the specific param values from state/etc
  },
);

Use the computed path variable in history.replace or as a Link component target.

answered Dec 14, 2022 at 8:08

Drew Reese

207k19 gold badges280 silver badges293 bronze badges

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

6 Comments

Oleksandr Fomin Over a year ago

But how do I get the current URL (which could be anything) in such format "/organization/:orgId/site/:siteId/user/:userId", so that I can pass the all the IDs there?

Drew Reese Over a year ago

@OleksandrFomin Wouldn't that be the currently matched route? The component gets the ids from the useParams hook. Why wouldn't this component doing the org selection not know where it's being rendered? I took the route path definition from your post. Maybe I've misunderstood your scenario?

Oleksandr Fomin Over a year ago

yes, but the URL I can get from useLocation hook would have the actual IDs in it, so the generatePath function wouldn't know what to update

Drew Reese Over a year ago

@OleksandrFomin FWIW I don't think the useLocation hook is useful here since it yields the pathname when you want the path string that has the route path parameters you want to update. Maybe it would clearer what you are trying to work with if you could edit your post to include a minimal reproducible example that includes the route you are working with and the component code trying to update a path parameter.

Oleksandr Fomin Over a year ago

The path string is something that I'd been struggling to retrieve. It seems to work now with getRoutePath function from this reply stackoverflow.com/a/70754791/13288420 combined with your solution. Thank you very much!

|

Ken Labso · Accepted Answer · 2022-12-14 08:09:17Z

0

useNavigate provides a way to somehow do it but I think you have to create a function that manually handles the URL params.

// import useNavigate
import {useNavigate} from 'react-router-dom';

export default function App() {
  const navigate = useNavigate();

  const handleClick = () => {
    // navigate programmatically
    navigate({pathname: '/about', search: '?query=abc&page=25'});
  };

  return (
    <div>
      <button onClick={handleClick}>Navigate to About</button>
    </div>
  );
}

answered Dec 14, 2022 at 8:09

Ken Labso

9111 gold badge10 silver badges13 bronze badges

1 Comment

Drew Reese Over a year ago

OP specified they are using react-router@5. useNavigate is a RRDv6 hook.

Collectives™ on Stack Overflow

Update dynamic param in URL React Router 5

2 Answers 2

6 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related