Help with converting an existing routeless app to use client-side routing, for the purpose of enabling browser navigation back/forwards and bookmark capability.

[bmm-brobbins]

I'm trying to convert a big sprawling routeless client-side create-react-app into a client-side routed app using react-router-6, so that user browser history navigation will function as expected (back and forward buttons, bookmarks). All my searching leads to react-router. And it seems the first step in this effort is to replace what were internal useState variables with their url based equivalents.

Having some newbie issues, in particular I have two questions: 1) Regarding route setup, and 2) Regarding Url modification. I'm on react/react-dom 18.2 and react-router-dom 6.4.

In particular, how would I set up routes for the following cases, and how would I construct the next url to be navigated to given changes to state via user interaction.

Route cases to handle:

1. /TopLevelApp
2. /TopLevelApp/
3. /TopLevelApp/pathParam1
4. /TopLevelApp/pathParam1/
5. /TopLevelApp/pathParam1/pathParam2
6. /TopLevelApp/pathParam1/pathParam2/

I think the rule would be that trailing slashes are ignored (even numbered cases above), and possibly redirected to their equivalent non-trailing-slash urls (odd numbered cases above), only if that is necessary.

So my first question is how to set up the <Routes> and <Route>'s and <Outlet>'s and index routes, etc, to handle the above six cases.

My second question is, after UI interaction, how do I derive the next go-to url to navigate to when: A) pathParam1 is added (from cases 1 & 2); or B) pathParam1 is changed (from cases 3 & 4); or C) pathParam1 is changed, without hurting pathParam2 if it exists (from cases 5 & 6)?

Ignoring searchParams for now, because I think I understand how to manipulate those. But I don't understand how to manipulate path params in isolation from the rest of the url, e.g. which react-router-6 mechanisms or hooks to employ. With searchParams there's a nice clean get and set interface. Is there a similar 'setter' for path params? If not, what's a typical series of steps to cleanly emulate one?

I can get the value of each pathParam via const params = useParams() and then params.pathParam1 and params.pathParam2 (or destructured equivalent). But I don't understand which react-router-6 mechanisms or hooks to employ to manipulate pathParams to construct the next url to be navigated to, in response to UI-activated changes to the variables that pathParam1 and/or pathParam2 represent.

I haven't here provided elements to be rendered for each case, because that doesn't seem to map well to the application UI. Rather, all of the above routes would point to the TopLevelApp, and my initial plan is to continue to conditionally render child components based on the existence and/or value of each of the pathParams, using ternary conditionals. The app is already architected this way, and I'm only trying to substitute what were internal useState variables with their url-based replacements, for the purpose of enabling user browser history navigation (back and forward buttons, and bookmarks).

Thanks, I hope this post is understandable. I'm on react/react-dom 18.2 and react-router-dom 6.4.