next/navigation: replace path parameter

[jamesarosen]

Summary

I'm trying to build a component that lets the user switch a path parameter. I can do this using the older next/router, but I'm unable to figure out how to do this with next/navigation.

Some constraints:

• the component can be used on a variety of routes, so long as they have the right dynamic segment
• the component can be used on pages that also have search params and shouldn't interfere with them

For example, given these routes

/books/[book_id]
/books/[book_id]/summary
/books/[book_id]/author
/books/[book_id]/comments

if the user is on /books/12/comments?sort=popular and uses the component to change the book_id to 46, they go to /books/46/comments?sort=popular

Here's how I might implement that in the older next/router:

const BookChooser = () => {
  const router = useRouter() // next/router
  const bookID = router.query.book_id;
  const setBookID = useCallback((newID) => {
    router.push({
      pathname: router.pathname,
      query: { ...router.query, book_id: newID },
    }).catch(console.error);
  }, [router]);

  return (<Search value={bookID} onChange={setBookID} />)
}

If the book_id were in the URLSearchParams, this would be easy to convert to next/navigation's useSearchParams and useRouter. But as far as I can tell, next/navigation doesn't offer a way to change path params.

Is the "correct" solution to have each of these pages know how to swap the path parameter while leaving the search params intact?

// pages/books/[book_id]/summary.tsx
const searchParams = useSearchParams();
const changeBookForSummary = useCallback((bookID) => {
  router.push(`/books/${bookID}/summary?${searchParams.toString()}`);
});
<BookChooser onChange={changeBookForComments} />

// pages/books/[book_id]/author.tsx
const searchParams = useSearchParams();
const changeBookForAuthor = useCallback((bookID) => {
  router.push(`/books/${bookID}/author?${searchParams.toString()}`);
});
<BookChooser onChange={changeBookForComments} />

// pages/books/[book_id]/comments.tsx
const searchParams = useSearchParams();
const changeBookForComments = useCallback((bookID) => {
  router.push(`/books/${bookID}/comments?${searchParams.toString()}`);
});
<BookChooser onChange={changeBookForComments} />

Additional information

No response

Example

No response

[vimalsonara]

1. import useSearchParams

import { useSearchParams } from "next/navigation"

2. assign to variable

  const serachParams = useSearchParams();

3. pass searchParams to URLSearchParams

const params = new URLSearchParams(serachParams);

• set param

params.set(key, value);

• delete param

params.delete(key);

[jamesarosen]

This is a great pattern for working with search params, but doesn't really relate to my question, which is about path parameters.

If I were to set book_id in my search params, I'd get pretty weird URLs:

// the user is at /books/12/comments?sort=popular
const pathname = usePathname() // "/books/12/comments"
const params = useSearchParams() // [ ["sort", "popular" ] ]
const newParams = new URLSearchParams(params) // [ ["sort", "popular" ] ]
newParams.set('book_id', 46) // [ ["sort", "popular" ], ["book_id", "46"] ]
router.push(`${pathname}?${newParams}`)
// the user is now at /books/12/comments?sort=popular&book_id=46

Now there are two conflicting book_id values: the 12 in the path and the 46 in the search.

[vimalsonara]

I realize that my previous suggestion wasn’t relevant to your question. I apologize for the oversight.

[maheshj01]

@jamesarosen how to pass parameters without showing them in the URL?

[vimalsonara]

You can't.

[JuniorLoch]

Have you managed to find a workaround for this? almost a year later and I have almost the same problem, and cant see a better solution than just use

router.push(`route/${param}`)

would be nice to have a way to get the current pathname without the dynamic route segments