Managing state with two simultaneously open routes

[LilyStilson]

I have an interesting Router usage here, where there is a situation when both of my routes CAN BE visible simultaneously.

function RouterWrapper() {
    let router = createBrowserRouter([
        {
            path: "/",
            element: <App />
        },
        {
            path: "/omeditor",
            element: <OutputModuleEditor />
        }
    ])
    return (
        <SettingsProvider>
            <RouterProvider router={router} />
        </SettingsProvider>
    )
}

This is possible when creating a web app using something like Electron or Tauri, where Router is used to show different views in different windows. The problem is that I personally haven't found a way to somehow trigger the <App /> reload after something has been changed within a different route. And router itself does not seem to be able to support that.

There is a <SettingsProvider /> context provider with useSettings(): [Settings, Dispatch<SetStateAction<Settings>>] hook. When I try to use that to modify my app's settings through the /omeditor route - it does not affect the root route at all.

The change would occur something like this:

1. Used adds something in the /omeditor and presses "Save"
2. Settings are being set using setSettings() which derives from useSettings()
3. Settings within /omeditor and / rootes are being changed, triggering a re-render

But settings are being changed only within /omeditor route and nowhere else.

So... Am I missing something, and is it possible with React Router or am I better off looking for something else here?

[brophdawg11]

If you want both App and OutputModuleEditor to be visible at the same time when the path is /omeditor, then you can nest OutputModuleEditor beneath App as a child route. See https://reactrouter.com/en/main/start/overview#nested-routes for more information.

[LilyStilson]

Albeit helpful, it's not exactly the solution I am looking for.

I want to achieve something akin to two tabs being open at the same time with different routes and one tab can modify contents of the other one, not lay out everything within a single tab.

For similar functionality, I don't even need to use router, since the UI library I use supports Modals, I could've just put the <OutputModuleEditor /> within it. It would just be a pity to lose a lot of work with setting up the multi-window app, that's why I'm looking into it.

[brophdawg11]

oh - if you're talking about 2 different tabs completely then it's not a router concern. The router is responsible for the URL -> UI mapping for a single tab/URL. Communicating across tabs is outside the scope of the router and can be done through a handful of Javascript APIs: https://blog.bitsrc.io/4-ways-to-communicate-across-browser-tabs-in-realtime-e4f5f6cbedca