Where should I specify the params routes when using React router?

Question

Where should I specify the routes that are based on the parameters? For example, for the paths, I usually define them in the index.js (the root file) of my React application as follows:

<BrowserRouter>
    <Routes>
        <Route path="/" element={<App />}>
            <Route index element={<HomePage />}>
            <Route path="users" element={<Users />}>
        </Route>
    </Routes>
</BrowserRouter>

and when I use useNavigate(), or <Link> or <NavLink> inside any of the routes specified in the BrowserRouter above, it automatically switches to that page and rerenders the DOM.

Now what about if I have these routes:

1. /users?tab=create-user
2. /users?tab=view-users

In which schema I should specify them? inside the BrowserRouter above? or inside the Users component itself?

If it should be inside the Users component itself, then how am I going to detect changes made to the URL and re-render the screen based on that? inside useEffect? if inside useEffect, then imagine I have 20 routes like /users that have the ?tab param, then I will have to create useEffect inside all of those 20 routes then?

Is there a common way of doing this? like having a big wrapper that listens to those changes made to the search params that will then navigate automatically?

I hope you got my question :D

If not, let me know in the comments.

thanks 🌹