React又见路由之子路由

我们做应用时经常需要做底部或者顶部导航切换变换页面功能，类似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);
    }
}

2. 创建一个公共头部

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