Javascript 反应路由器有2个入口点

我正试图实现开发人员使用react创建新页面的能力，同时保持与我们用于所有页面（包括过滤器、选项卡等）的母版页模板的兼容性

我需要的是能够将导航组件呈现为1个div，并将页面内容（应用程序）呈现为另一个div（如下所示）

我目前的解决方案是分别渲染这两个组件，但我最头疼的是如何在这两个组件之间架起路由器的桥梁。我遇到了路由器有2个实例的问题（我可以从代码中理解为什么），但我不确定如何构造它来实现我想要的行为

我如何能够将这些组件呈现为两个独立的根div，但它们仍然共享历史记录和导航路线更改，并反映到应用程序组件中

import React } from 'react';
import { render } from 'react-dom';
import { BrowserRouter, Link, Route, Switch } from 'react-router-dom';
import ContactPage from './ContactPage';

const HomePage = () => <div> Home page </div>;
const AboutPage = () => <div> This is an About Page </div>;

const Navigation = () => (
    <div>
        {/* Match structure of legacy tab structure, we then just replace current with a react component for navigation */}
        <li className="dropdown" id="tab-menu-li">
            <ul className="nav nav-tabs" id="tab-menu-list">
                <li className="text-left">
                    <Link to={`/home`}>home</Link>
                </li>
                <li className="text-left">
                    <Link to={`/about`}>Contact Us</Link>
                </li>
            </ul>
        </li>
        {/*  Renders into tab-menu-li fine if I put the switch in here
        <Switch>
            <Route path={`/home`} exact component={HomePage} />
            <Route path={`/about`} exact component={ContactPage} />
        </Switch>
        */}
    </div>
);

const App = () => (
    <Switch>
        {/*  How can I make this App component, catch the route changes from navigation?
             This component draws fine, and /contact etc will work on page load. But any route changes triggered in navigation are never reflected here
        */}
        <Route path={`/home`} exact component={HomePage} />
        <Route path={`/about`} exact component={AboutPage} />
    </Switch>
);

render(<BrowserRouter><Navigation /></BrowserRouter>, document.getElementById('tab-menu-li'));
render(<BrowserRouter><BaseLayout /></BrowserRouter>, document.getElementById('dataContainer'));

import React}来自“React”；
从'react dom'导入{render}；
从“react router dom”导入{BrowserRouter，Link，Route，Switch}；
从“./ContactPage”导入ContactPage；
const HomePage=（）=>主页；
const AboutPage=（）=>这是一个关于页面；
常量导航=（）=>(
{/*匹配遗留选项卡结构的结构，然后我们将当前替换为用于导航的react组件*/}



家


联系我们



{/*如果我把开关放在这里，就可以渲染到选项卡菜单中
*/}
);
常量应用=（）=>(
{/*如何使此应用程序组件从导航中捕获路线更改？
此组件绘制良好，并且/联系人等将在页面加载时工作。但导航中触发的任何路由更改都不会在此处反映出来
*/}
);
render（，document.getElementById（'tab-menu-li'）；
render（，document.getElementById（'dataContainer'）；

要创建两个不同的应用程序并共享同一历史对象，您需要手动创建路由器，并提供您想要使用的历史对象类型。BrowserRouter和HashRouter都为您执行此操作（因此命名为Browser和Hash Router）。但您可以使用路由器并为其提供历史对象

// history.js
import { createBrowserHistory } from 'history'

const browserHistory = createBrowserHistory({
  /* pass a configuration object here if needed */
});

render(<Router history={browserHistory}><Navigation /></Router>, document.getElementById('tab-menu-li'));
render(<Router history={browserHistory}><BaseLayout /></Router>, document.getElementById('dataContainer'));

//history.js
从“历史记录”导入{createBrowserHistory}
const browserHistory=createBrowserHistory({
/*如果需要，在此处传递配置对象*/
});
render（，document.getElementById（'tab-menu-li'）；
render（，document.getElementById（'dataContainer'）；

太棒了，这正是我想要的魅力，谢谢！