javascript - リンクとルートのパス要素を分離する React-Router v4

Question

(わかりやすくするために更新)アプリの構造は次のとおりです。

<Layout />
  /components/
    <Header /> 
    <Navigation />
    <Stage />
    <Footer />
  /pages/
    <Home />
    <About />
    <Contact />

私の考えでは、要素を分離し、親(および後でサイト マップ) に<Navigation>インポートします。<Header>次に、すべてのコンポーネントが親にステージングされ、親<Layout>にフィードされます<div id="root">

私の /pages/ コンポーネントのコンテンツは、以下のコードで正常に呼び出され、レンダリングされます。ただし、このページのコンテンツは<header>要素内にレンダリングされ、ページ階層が壊れます。

私の意図は、デバイスに親コンポーネント<Switch>内の /pages/ コンポーネントをレンダリングさせることです。<Stage>

<Switch>要素をコンポーネントに移動しようとする<Stage>と、アプリ全体がロード/レンダリングされなくなります。

import React from 'react';

import {
  BrowserRouter as Router, Route, Link, Switch
} from 'react-router-dom';


import Home from './../pages/Home';
import About from './../pages/About';
import Contact from './../pages/Contact';

export default class Navigation extends React.Component {
  render() {
    return (
      <Router>
        <div className="navigation">

          <nav>
            <Link to="/">Home</Link>
            <Link to="/about">About</Link>
            <Link to="/contact">Contact</Link>
          </nav>

{/*
  Below should be repositioned outside of <header>, in Stage component
*/}
          <div className="stage">
            <Switch>
              <Route exact path="/" component={Home} />
              <Route path="/about" component={About} />
              <Route path="/contact" component={Contact} />
            </Switch>
          </div>

        </div>
      </Router>
    )
  }
}

<Stage>私の質問は次のとおりです。コンポーネントから選択されたときに、コンポーネント内に必要な /page/ コンポーネントをルーターにレンダリングさせるにはどうすればよいですか<Navigation>。

すべてのreacttraining.comの例は単一ページであるため、アプリを最適に構築する方法を想定する際に論理的な間違いを犯しているのか、それとも react を使用して 2 つの要素間の関係を再作成する際にプログラミング エラーを犯しているのかを判断するのに苦労しています。 -ルーター v4.