我们做应用时经常需要做底部或者顶部导航切换变换页面功能,类似Android的导航+Fragment
1、创业一个商城界面首页
先加入路由 <Route path="/goods" component={GoodsIndex}/>
import React from 'react';
import HeaderComponent from '../common/header'
import {Route, Switch,Redirect} from 'react-router-dom';
import GoodsDetail from './details';
import GoodsComment from './comment';
export default class GoodsIndex extends React.Component {
render() {
return (
<div>
{/*界面公共头部*/}
<HeaderComponent/>
{/*点击切换详情子页面*/}
<button onClick={this.goSubPage.bind(this, "/goods/details")}>详情</button>
{/*点击切换详情子页面*/}
<button onClick={this.goSubPage.bind(this, "/goods/comment")}>评论</button>
<div>
<Switch>
{/*商城子页面 详情页面 子页面路由必须跟随父页面的路由,比如父页面路由为 goods,则子页面路由为/goods/details */}
<Route path="/goods/details" component={GoodsDetail}/>
{/*商城子页面 评论页面*/}
<Route path="/goods/comment" component={GoodsComment}/>
{/*刚进入商城默认子页面 详情页面*/}
<Redirect to="/goods/details"/>
</Switch>
</div>
</div>
)
}
//切换子页面
goSubPage(path) {
this.props.history.replace(path);
}
}
- 创建一个公共头部
import React from 'react';
//子组件返回要用这个方法
import {withRouter} from 'react-router';
class HeaderComponent extends React.Component {
render() {
return (
<div>
<button onClick={this.goBack.bind(this)}>返回</button>
<text>标题</text>
</div>
)
}
goBack() {
this.props.history.goBack();
}
}
//子组件返回时直接 this.props.history.goBack();用不了,必须用withRouter
export default withRouter(HeaderComponent);
3、两个子页面
import React from 'react';
export default class GoodsDetails extends React.Component {
render() {
return (
<div>我是商品详情</div>
)
}
}
import React from 'react';
export default class GoodsComment extends React.Component {
render() {
return (
<div>我是评论</div>
)
}
}