React-Router v4 分離鏈接和路由路徑元素

Question

（為清晰起見更新）我的應用程序具有以下結構：

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

我的想法是將<Navigation>元素隔離，並導入到父<Header> （以及后來的站點地圖）中。 然后所有組件都被暫存到父<Layout> ，它被送入<div id="root">

我的 /pages/ 組件的內容被成功調用並使用以下代碼呈現。 但是，此頁面內容呈現在我的<header>元素內，打破了頁面層次結構。

我的目的是讓<Switch>設備呈現<Stage>父組件中的 /pages/ 組件。

任何將<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>
    )
  }
}

我的問題是：當從<Navigation>組件中選擇時，如何讓路由器在我的<Stage>組件中呈現所需的 /page/ 組件。

由於所有reacttraining.com示例都是單頁的，我正在努力確定我是否在假設我的應用程序應該如何以最佳方式構建時犯了邏輯錯誤，或者在使用 react 重新創建兩個元素之間的關系時犯了一個編程錯誤-路由器 v4.

Answer 1

您需要做的就是在將stage包裝在標題中時將這兩個div分開。 由於組件需要在單個元素中呈現，因此您需要圍繞整個內容使用另一個div ：

export default class Navigation extends React.Component {
  render() {
    return (
      <Router>
        <div>
          <div className="navigation">
            <nav>
              <Link to="/">Home</Link>
              <Link to="/about">About</Link>
              <Link to="/contact">Contact</Link>
            </nav>
          </div>

          <div className="stage">
            <Switch>
              <Route exact path="/" component={Home} />
              <Route path="/about" component={About} />
              <Route path="/contact" component={Contact} />
            </Switch>
          </div>
        </div>
      </Router>
    );
  }
}

更新：更新我的答案：

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

const Header = () => <h1>I'm a header</h1>;

const Navigation = () => (
  <nav>
    <Link to="/">Home</Link>
    <Link to="/about">About</Link>
    <Link to="/contact">Contact</Link>
  </nav>
);

const Stage = () => (
  <div>
    <Route exact path="/" component={Home} />
    <Route path="/about" component={About} />
    <Route path="/contact" component={Contact} />
  </div>
);

const Footer = () => <h6>Footer</h6>;

const Home = () => <h3>Home</h3>;
const About = () => <h3>About</h3>;
const Contact = () => <h3>Contact</h3>;

const App = () => (
  <Router>
    <div>
      <Header />
      <Navigation />
      <Stage />
      <Footer />
    </div>
  </Router>
);

render(<App />, document.getElementById('root'));

這是工作版本： https : //codesandbox.io/s/v21BD37NX