2つのエントリポイントを持つリアクタルータ

Question

私はすべてのページ（フィルタ、タブなどを含む）に使用するマスターページテンプレートとの互換性を維持しながら、反応を使って新しいページを作成する機能を実装しようとしています

私は、ページコンテンツ（アプリケーション）で、1 DIVにナビゲーションコンポーネントをレンダリングする機能である必要は何

（下図の）別にレンダリングされている

私の現在のソリューションは別に2つのコンポーネントをレンダリングする必要、しかし私が苦労しているのは、ルータをブリッジする方法です 二つ。私はルータが2つのインスタンスを持っている問題を抱えていますが（コードからわかる理由はありますが）、私が望む動作を達成するためにどのように構造化できるかは分かりません。

これらのコンポーネントを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')); 

Answer 1

。 BrowserRouterとHashRouterの両方がこれを行います（したがってブラウザとハッシュルータの名前）。しかし、ルータを使用して履歴オブジェクトを提供することができます。

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