React router v4在元素内部渲染组件-Java 学习之路

我'm using the latest version of React Router v4 and I'尝试在 PageWrap div中渲染我的页面组件Home / About但我遇到的问题是，如果我将路由添加到我的 Headers 中，那么它将切换路由，但它们将显示Home / About组件作为一部分 Headers ，没有我想要的地方 .

如果我将路由放入 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>)

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

并确保从Header组件中删除 <Router> 和所有 <Route> .

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

回复于 2024-04-27T11:12:39+08:00

React router v4在元素内部渲染组件

1 回答

相关问题