React Router V6如何实现两个独立且同时的导航路由出口

我正在构建一个分为左右两部分的网站，每部分都设有标签页，期望通过类似"https://mywebsite?right=billing&left=stock"的URL，利用left=和right=查询参数控制对应面板的显示内容。

简化应用结构 #

• App.tsx中通过Split组件包含PanelLeft和PanelRight子组件，两个面板组件通过extractQueryFromUrl提取URL参数，尝试返回<Outlet>并传递上下文
• main.tsx中createBrowserRouter配置了两个同路径的子路由，分别对应左右面板并生成包含Home、Stock、Billing的子路由
• 当前路由映射与<Outlet>配置完全无效

实际应用更为复杂，使用Redux基于唯一tabId管理状态，单Outlet的子路由运行正常，核心问题是实现双面板的同时独立导航。

更新（2024/09/22） #

采纳建议后，改用路由映射表tabsRoutesMap创建单Outlet路由，直接通过提取URL路径匹配对应组件，解决了多Outlet无效的问题。

内容的提问来源于stack exchange，提问作者pierre.b