React-Router v4 分离 Link 和 Route 路径元素答案

【问题标题】：React-Router v4 separating Link and Route path elementsReact-Router v4 分离 Link 和 Route 路径元素
【发布时间】：2017-10-02 06:42:12
【问题描述】：

（为清晰起见已更新）我的应用具有以下结构：

<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-router v4 重新创建两个元素之间的关系。

【问题讨论】：

如果在打开舞台
之前而不是之后关闭导航
会发生什么？
它会导致损坏，因为组件必须包装在单个元素中。
因此，在舞台 div 之前关闭导航 div，然后将两者包装在一个新的单个 div 中应该可以工作。
嗨@Drum。似乎我的问题需要澄清以更好地描述我的意图。请参阅上面的更新。

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