//求大神幫幫忙
問題是Main頁面的this.props.children渲染不出來
使用的是react-route-dom
creat-reaat-app
//路由配置
import React, {Component } from 'react';
import {
HashRouter,
Route,
Switch,
} from 'react-router-dom'
import hashHistory from 'history/createHashHistory'
import Detail from '../container/Detail/Detail'
import Home from '../container/Home/Home'
import List from '../container/List/List'
import NotFound from '../container/NotFound/NotFound'
import Main from '../container/Main'
export default class SetRoutes extends Component {
render() {
return (
<HashRouter>
<Switch>
<Route render={() =>
<Main>
<Route exact path='/Home' component={Home} />
{/* <Route path='/List' component={List} />
<Route path='/Detail' component={Detail} /> */}
</Main>
} >
</Route>
</Switch>
</HashRouter>
)
}
}
//Main頁面
import React, { Component } from 'react';
class Main extends React.Component{
render(){
console.log(this.props.children)
return(
<div>
<p>header</p>
<div>{this.props.children}</div>
<p>footer</p>
</div>
)
}
}
export default Main;
//其他三個頁面的一個home
import React, { Component } from 'react';
import {Link} from 'react-router-dom'
class Home extends React.Component{
render(){
return(
<div>
<p>Home</p>
<Link to='/list'>to list</Link>
</div>
)
}
}
export default Home
uj5u.com熱心網友回復：
import React, { Component } from 'react';import React, { Component } from 'react';
class Main extends React.Component{
render(){
console.log(this.props.children)
return(
<div>
<p>header</p>
<div>{this.props.children}</div>
<p>footer</p>
</div>
)
}
}
export default Main;
列印出來的及結果是：
uj5u.com熱心網友回復：
給你推薦個東西，你瞅瞅里面生命周期的方法重點看下
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/77008.html
標籤：JavaScript
上一篇：html定位問題