React router with regex - inserting a number in middle of the path - reactjs

Question

I get my current path by using useLocation() hook.
I have several buttons and want them to navigate me to the current path combined with that concrete list ID.
Lets suppose its https://localhost:3000/list/3/items
How to insert that ID (here is 3) in between - list/{id}/items - with regex?
const navigate = useNavigate();
const location = useLocation();
// location.pathname - getting current path
// pinned to each button
const handleListChange = (listId: number) => {
// navigate(...);
};
I cant achieve that with just navigate("/list/{listId}/items") because /items can differ depending on what subpage im currently at ("/list" stays the same). So it can be for example list/{listId}/itemsSubpage/.../.... I just want to stay at the current page when navigating and only let id change.

Answer 1

Why not simply redirect starting from the root? I don't see the need for a regular expression here.
navigate(`/list/${listId}/items`);
or am I missing something?
Post Edit answer:
There are a few ways to achieve what you want but I'll just go ahead and post the one that came to me first, you can adjust it to your needs.
const exp = /(\/list\/)\d{1,}(\/?.+)?$/i;
const currentUrlMock = 'https://test.com/list/240/items/subpage/2/doesnt-matter'
const replaceId = (newId) => currentUrlMock.replace(exp, `$1${newId}$2`)
console.log(replaceId(3));
// logs: https://test.com/list/3/items/subpage/2/doesnt-matter
How this works is that the regular expression contains two capture groups:
(\/list\/) that matches the /list part
(\/?.+)?$ that matches everything that appears after your ID
Between them there's a \d{1,} that will capture all digits, it's not a capture group though - it has no parentheses around it ().
Replace method on string accepts regex as a first param and in the second param you can access captured groups by using dollar signs and group number, $1 to capture first group, $2 to capture the second group and so on.
By using $1${newId}$2 $1 will be replaced with fist captured group - /list and $2 will be replaced with second captured group - (\/?.+)?$. Between these a new ID which is passed in a function param will be inserted.
You should add more checks to make sure there's a proper match, I also tested the regular expression only for these URLs:
https://test.com/list/4
https://test.com/list/4/
https://test.com/list/120
https://test.com/list/120/
https://test.com/list/120/items
https://test.com/list/120/items/240
https://test.com/list/120/items/240/
and it works for these but your real use case might be different.