gpt4 book ai didi

javascript - React router v4 渲染元素内的组件

转载 作者:行者123 更新时间:2023-11-30 08:27:14 25 4
gpt4 key购买 nike

我正在使用最新版本的 React Router v4,我正在尝试在 PageWrap div 中呈现我的页面组件 Home/About 但我遇到的问题是如果我添加将路由添加到我的标题中,然后它会切换路由,但它们会将 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>)

最佳答案

你应该只有一个 <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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com