Can I add routes dynamically?

[qwertie]

In v5 you can have <BrowserRouter> in an outer component and <Routes> in a different (e.g. lazy-loaded) child component. In v6 this still works, but all the "data APIs" are said to be incompatible, requiring createBrowserRouter instead.

However, with the new function I don't see how to achieve the same separation where the router is defined in an "outer" location and the routes are defined in an "inner" lazy-loaded location. In fact, createBrowserRouter([]) produces the error "You must provide a non-empty routes array to createRouter". So... can we not add the routes dynamically?

(for those who don't have this problem and just want a dynamic route matching a static pattern, use "dynamic segments")

[qwertie]

After trying to understand this thing for much longer than I would like, my sense is that react-router v6 is actually two different routing libraries masquerading as one: the v5 library (tweaked for more consistency with v6) and the v6 library (indicated via phrases like "data API" or "data router"). Each of these may have features that the other lacks, something like this:

Feature	v5	v5-inside-v6	v6
Dynamic segments	✅	✅	✅
Building routing tree incrementally	✅	✅ (child components render <Routes>)	✔ (lazy)
"blockers"	✅	✔ ("unstable")*	✔ ("unstable")*
Prompt about unsaved changes before navigating (<Prompt/>)	✅	❔*	❔*
Regex routes	✅	❌	❌
Unload period (time for modals to fade out)	❌	❌	❌
Loaders	❌	❌	✔**
hooks for reading route info	❌	❌	✅
<Await>	❌	❌	✅***
<Link to="relative-path"> works as you'd expect	❌	✅	✅

In the v6 paradigm, you shouldn't add new routes by returning them from child renderers via <Routes> -- if you do, then they are treated like a v5-in-v6 <Routes> object and e.g. loaders silently fail to work. Instead, in the v6 paradigm the only "approved" approach that I was able to find was to use lazy to slow down loading parts of the routing table. (This doesn't feel as nice to me.)

* I can't find any example code for using blockers or prompting about unsaved changes. Note that unstable_useBlocker requires a synchronous function to decide whether to block, so I guess your only option for prompting is window.confirm(). Also note that this is only for navigation within the same SPA; you need a separate beforeunload event handler for cross-origin prompting.
** Parent loaders cannot be made to run before child loaders, a huge limitation IMO
*** I can't tell what this has to do with routing at all. It appears to just be a load-assister, similar to a hook like...

// Returns `undefined` when loading isn't finished
export function useAsync<T>(getPromise: () => Promise<T>|T, deps: React.DependencyList): Error | T | undefined {
    const [result, setResult] = useState<T|Error>();

    useEffect(() => {
        var promise = getPromise();
        if (promise instanceof Promise) 
            promise.then(setResult).catch(e => setResult(toError(e)));
        else
            setResult(promise);
    }, deps);

    return result;
}

[achtan]

v6 now supports blocking/prompting https://reactrouter.com/en/main/hooks/use-blocker

[qwertie]

Yes, we just upgraded to use the new useBlocker, and upgraded that to an async blocker using this hook with two arguments (a synchronous shouldBlock that is called first, then an asynchronous one that is called if the sync one returns true):

export function useAsyncBlocker(shouldBlock: boolean | BlockerFunction, shouldKeepBlocking: (blocker: Blocker) => Promise<boolean>) {
    const blocker = useBlocker(shouldBlock);
    const [onBlockInProgress, setOnBlockInProgress] = useState<boolean>();

    if (blocker.state === 'blocked' && !onBlockInProgress) {
        setTimeout(async() => { 
            if (!onBlockInProgress) {
                setOnBlockInProgress(true); 
                try {
                    const shouldNotContinue = await shouldKeepBlocking(blocker);
                    shouldNotContinue ? blocker.reset() : blocker.proceed();
                } catch (e)  {
                    console.error('Unexpected error in blocker handler', e);
                    blocker.proceed();
                } finally {
                    setOnBlockInProgress(false);
                }
            }
        });
    }
}