wrapper or event that can mute Router#1 temporarily

[j67Sv89n]

I have two routers and I make a separation between their functionality. I've tried a variety of options.

  const router1_Options = (e) => {
    switch (e.url) {
          case '/settings':
              console.log("router ---1")
                      route(previousPath, false);    or    setComponent1_Router(<Super />)
          break;
    }
  };

  const router2_Options = (e) => {
            switch (e.url) {
            case '/settings':
                 console.log("router ---2")
                             route("/myPath", false);     or    setComponent2_Router(<Loged/>)
            break;
        }
      };
or

<Match path="/">{({ matches, path, url }) => 
<Home component />
</Match>

<Match path="/settings">{({ matches, path, url }) =>  
<Home component />
<Settings component />   (position absolute)
</Match>

I can't figure out how I can stop Router#1 from running and in the next step start Router#2 and route to settings. After all, only in this way I will get a clean history, without using the route(previousLoaction, false). If in this case I use a Match, then Router No. 1 will still be empty when changing the route in Router#2. Is there a wrapper or event that can mute Router #1 temporarily?

<div id="mytoggle" style={{display:"flex", color:"orange", fontWeight:"600", backgroundColor:"violet", textAlign:"center"}}>
            <a style={{marginRight:"20px"}} href="/">Router-1 HomeDir</a>
            <a style={{marginRight:"20px"}} href="/super">Router-1 Super</a>
            <a style={{marginRight:"20px"}} href="/myroute">Router-1 MyRoute</a> 
            <a style={{marginRight:"20px"}} href="/news">Router-1 News</a>
            <a style={{marginRight:"20px"}} href="/settings" onClick={openLogin}  data-native>Router-2 Loged</a> 
</div>

{myFirstRouter &&
<div style={{backgroundColor:"pink", width:"300px", height:"400px", verticalAlign:"middle", justifyContent:"center"}}> 
<Router>
    <Route path="/" component={HomeDir} />
    <Route path="/super" component={Super} />
    <Route path="/myroute" component={MyRoute} />
    <Route path="/news" component={News} />
</Router>
</div>
}

{myModal &&
<div style={{backgroundColor:"yellow", width:"200px", height:"200px", position:"absolute", left:"100px", top:"300px", zIndex:"15"}}>
        <Router>
            <Route path="/settings" component={Loged} />
        </Router>
</div>
}

When I click on the tag a link, with a reference to the settings, I see that the context of one router to another is changing, Router# 1 does not know the history of Router#2 and this is normal. current location - /Settings previous location - undefined

[j67Sv89n]

For now, I got the desired result by replacing the path on the previous route, the result suits me, but when you click, sometimes you can see that the page is being updated (not always visible), but I have not yet tested this idea on pages with a large number of components.

    setTimeout(() => {
        setMyUrlRoute(location.path);
        console.log("setMyUrlRoute(location.path);")
    }, 0);

Maybe it can be solved with a >children< wrapper or Match element, but I doubt it. a clean solution when switching, for example, to login and path: "/login" in the modal version, requires a background, so for the modal window in this case it is necessary to create a second Router component and somehow separate the logic between them through the userReducer or states. Or maybe using useRouter and somehow stop updating router:

const router = useRouter();
router[0].router.componentDidUpdate()

If you look at the portals, in this case this is an extra div element that is not useful in this case, as it seems to me. The disadvantage of this method is the creation of logic for tracking the previous page, on which there was a click and one extra render during the transition, but sometimes it is not visible.