2

In react-router, there is a hook to retrieve path parameters, for example "/users/:id" where the code can access the id value.

In this example :id is a slug for a path parameter, and within your page component you'd get this id like so:

function UserPage() {
  const { id } = useParams();
  return <>{id}</>;
}

More details here

However, the useParams hook only gives me a getter for the segment and not a setter. So for example if I was in "/users/abc" and want to change it to "/users/def", the only way I can currently do that is by modifying the URL, but that's prone to errors, like missing out on query parameters, etc.

Is there a reliable way within react-router itself through which I can set the segment (My use case requires using a basename, so I don't feel safe haphazardly modifying the URL)? I can't seem to find it within the documentation, and I am unfamiliar with a lot of terms and synonyms that might make it easier to find it.

Improve this question
1
  • 1
    Yeah, I’ve run into this exact issue too. useParams() is super handy for reading the path, but there’s no built-in setter for path params. What I ended up doing was using useNavigate() to programmatically change the URL, like navigate("/users/def"). It feels a bit manual, but works reliably and keeps query params if you manage them correctly with useLocation(). Would be nice if React Router offered a more direct way though Commented Jul 20 at 8:18

3 Answers 3

Reset to default
0

There's useNavigate hook that you should be using for navigation.

So the approah would be to get current URL with query, transform it the way you want and use navigate from useNavigate hook.

Something like below

import { useParams, useNavigate, useLocation } from "react-router-dom";

function UserPage() {
  const { id } = useParams();
  const navigate = useNavigate();
  const location = useLocation();

  const handleChangeId = (newId: string) => {
    // Preserve query string if needed
    const search = location.search;
    navigate(`/users/${newId}${search}`);
  };

  return (
    <>
      <div>User ID: {id}</div>
      <button onClick={() => handleChangeId("def")}>Go to def</button>
    </>
  );
}

For more complex scenarios, i would suggest creating custom hook that would encapsulate manipulating the URL and navigation:

function useReplaceParam() {
    const location = useLocation()
    const navigate = useNavigate()

    return {
        replaceParam: (partToReplace: string, newValue: string) => {
            const parts = location.pathname.split('/')
            const index = parts.findIndex((p) => p === partToReplace)
            if (index >= 0) {
                parts[index] = newValue
            }
            navigate(parts.join('/') + location.search)
        },
    }
}

And then use it like below:

function UserPage() {
    const { id } = useParams()
    const { replaceParam } = useReplaceParam()
    const handleChangeId = (newId: string) => {
        if (id) replaceParam(id, newId)
    }

    return (
        <>
            <div>User ID: {id}</div>
            <button onClick={() => handleChangeId('def')}>Go to def</button>
        </>
    )
}
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

How would I deal with cases where there is more in the path? For example /users/:id/favorites
0

The useParams hook returns defined route path parameter values. The values are set by any means that updates the URL path, i.e. a user manually updating the URL in the address bar, or by any programmatic way of navigating to that URL path.

Set Path Parameter Values by Updating the URL

Within React-Router there are several ways to effect navigation actions:

  1. Using a Link/NavLink component or anchor tag to imperatively navigate to a specific path.

    import { Link, NavLink } from 'react-router';

...
<Link to="/users/def">User 1234</Link>
<NavLink to="/users/def">User 1234</NavLink>
<a href="/users/def">User 1234</a>

  2. Using Navigate component to declaratively navigate.

    import { Navigate } from 'react-router';

...
if (shouldNavigateToUsersDef) {
  return <Navigate to="/users/def" />;
}

  3. Using the useNavigate hook and issue a navigation action.

    import { useNavigate } from 'react-router';

...

const navigate = useNavigate();

useEffect(() => {
  if (shouldNavigateToUsersDef) {
    navigate("/users/def");
  }
}, [navigate, shouldNavigateToUsersDef]);

  4. Return a redirect from a route loader or action if using a Data router.

    import { redirect } from "react-router";

export async function loader({ request }) {
  ...
  if (shouldNavigateToUsersDef) {
    return redirect("/users/def");
  }
  return { .... data ... };
}

For reference:

Preserving URL Search Parameters

If you've URL query params to preserve then you can use the useLocation or useSearchParams hooks to access the current search params and forward them along with any of the above methods but the route loaders/actions.

Example:

import { useLocation, useNavigate } from 'react-router';

...

const { search } = useLocation();
const navigate = useNavigate();

...

navigate({
  pathname: "/users/def",
  search,
});

import { useNavigate, useSearchParams } from 'react-router';

...

const [searchParams] = useSearchParams();
const navigate = useNavigate();

...

navigate({
  pathname: "/users/def",
  search: searchParams.toString(),
});

Dynamic Path Creation

If you have a need to dynamically generate the target paths then use the generatePath utility. This utility take a path definition containing the path parameters, and an object providing values for those keys.

Example:

import { generatePath, useNavigate } from 'react-router';

...

const navigate = useNavigate();

...

navigate(generatePath("/users/:id", { id: "def" }));
Improve this answer

Comments

-1

Yes! In React Router v6, you can define path parameters (dynamic segments) in your routes using a colon (:) syntax. Here's how to do it:

1. Define a Route with a Path Param

<Route path="/users/:userId" element={<UserProfile />} />
  • :userId is the path parameter (can be any name you choose).

2. Access the Param in Your Component

Use the useParams() hook to read the parameter:

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

function UserProfile() {
  const { userId } = useParams(); // Destructure the param
  return <h1>User ID: {userId}</h1>;
}

3. Navigate to a Dynamic Route

You can generate links dynamically:

<Link to={`/users/${user.id}`}>View Profile</Link>

or programmatically:

navigate(`/users/${user.id}`);
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.