我正在使用最新版本的 React Router v4,我正在尝试在 PageWrap
div 中呈现我的页面组件 Home/About 但我遇到的问题是如果我添加将路由添加到我的标题中,然后它会切换路由,但它们会将 Home/About 组件显示为标题的一部分,而不是我希望它们显示的位置。
如果我将路由放入 PageWrap
中,则路由器无法工作,但不会在控制台上抛出任何错误。
如何在 PageBody
div 中显示和切换组件?
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>)
最佳答案
你应该只有一个 <Router>
在你的应用程序中,它应该包装你所有的 <Route />
和 <Link/>
组件树中的组件。
所以你在 App 组件中的 render 方法应该是这样的。
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>
来自您的 Header 组件。
更新的 WebpackBin:https://www.webpackbin.com/bins/-KiLrUNoJVxxLhL8UWx1
关于javascript - React router v4 渲染元素内的组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43562626/