React路由器v4渲染組件內部元素

Question

我使用的是最新版本的React路由器v4，我想渲染我的頁面組件主頁/關於PageWrap div裏面，但我遇到的問題是，如果我添加路由到我的頭部，然後它將切換路線，但他們將顯示Home/About組件作爲標題的一部分，而不是我希望它們成爲的地方。

如果我把路由放入PageWrap那麼路由器不能工作，但不會在控制檯上拋出任何錯誤。

如何在PageBody div中顯示和切換組件之間的切換？

Webpack link

app.js

import React from 'react' 
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom' 
import styled from 'styled-components' 
import Header from './Header' 

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


const Wrapper = styled.div` 
    display:flex; 
    min-height:100vh; 
flex:1; 
background:#eee; 
` 
const PageWrap = styled.div` 
margin:0 auto; 
min-width:1400px; 
background: #000; 
` 

class App extends React.Component { // eslint-disable-line react/prefer- 
stateless-function 
    render() { 
    return (
    <div> 
    <Header /> 
    <Wrapper> 
     <PageWrap> 
     <Router> 
      <Switch> 
      <Route exact path="/login" component={Home} /> 
      <Route exact path="/frontpage" component={About} /> 
      <Route exact path="/logout" render={() => (<div>logout</div>)} /> 
      </Switch> 
     </Router> 
     </PageWrap> 
    </Wrapper> 
    </div> 
) 
} 
} 
export default App 

Header.js

import React from 'react' 
import { BrowserRouter as Router, Route, Link } from 'react-router-dom' 
import styled from 'styled-components' 
import Home from '../pages/Home' 
import About from '../pages/About' 
import Topics from '../pages/Topics' 

const Wrapper = styled.div` 
    width:100%; 
    height:100px; 
    background:papayawhip; 
` 

class Header extends React.Component { // eslint-disable-line react/prefer- 
stateless-function 
    render() { 
    return (
    <Router> 
    <Wrapper> 
     <li><Link to="/">Home</Link></li> 
     <li><Link to="/about">About</Link></li> 
     <li><Link to="/topics">Topics</Link></li> 
     <Route exact path="/" component={Home} /> 
     <Route exact path="/about" component={About} /> 
     <Route path="/topics" component={Topics} /> 
    </Wrapper> 
    </Router> 
) 
    } 
} 


export default Header 

home.js

const Home =() => (<div>Home</div>) 

About.js

const About =() => (<div>About</div>) 

Answer 1

您應該只有在應用程序中一個<Router>，它應該包所有<Route />和<Link/>組件的組件樹。

所以你在App組件中的渲染方法應該是這樣的。

render() { 
    return (
    <Router> 
     <div> 
     <Header /> 
     <Wrapper> 
      <PageWrap> 
      <Switch> 
       <Route exact path="/login" component={Home} /> 
       <Route exact path="/frontpage" component={About} /> 
       <Route exact path="/logout" render={() => (<div>logout</div>)} /> 
      </Switch> 
      </PageWrap> 
     </Wrapper> 
     </div> 
    </Router>) 
} 

，並確保您的頭組件刪除<Router>和所有<Route>秒。

更新WebpackBin：https://www.webpackbin.com/bins/-KiLrUNoJVxxLhL8UWx1