javascript - 具有 2 个入口点的 React 路由器

Question

我正在尝试实现开发人员使用 React 创建新页面的能力，同时保持兼容性以与我们用于所有页面(包括过滤器、选项卡等)的母版页模板一起工作

我需要的是能够将导航组件呈现到 1 个 div 中，并将页面内容 ( App ) 呈现到另一个(如下所示)

我目前的解决方案涉及分别渲染这两个组件，但我正在努力的地方是如何在两者之间桥接路由器。我遇到路由器有 2 个实例的问题(我会从代码中理解原因)，但我不确定如何构建它以实现我想要的行为。

我如何才能将这些组件呈现为 2 个单独的根 div，但它们仍然共享历史记录并将导航路线更改反射(reflect)到应用程序组件？

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'));

Answer 1

要创建两个不同的应用程序并共享相同的历史对象，您需要手动创建路由器并提供您想要使用的历史对象类型。 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'));