javascript - 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>
    )
  }
}

我的问题是:如何让路由器在我的 <Stage> 中呈现所需的/page/组件？组件，当从 <Navigation> 中选择时组件。

由于所有 reacttraining.com 示例都是单页的，我很难确定我在假设我的应用程序应该如何最佳构造时是否犯了逻辑错误，或者是编程错误使用 react-router v4 重新创建两个元素之间的关系。

Answer 1

您需要做的就是将这两个 div 分开，因为您将 stage 包装在 header 中。由于组件需要在单个元素中呈现，因此您需要围绕整个内容使用另一个 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