react-router v4 路由配置

Question

使用react搭建一个类似淘宝的购物webAPP，路由采用react-router4实现，页面跳转逻辑如下：
1、默认进入超市列表页面，选择超市，点击超市跳转进APP页面
2、APP页面包括四个底部导航：首页、分类、购物车和我的，默认加载我的
3、从四个底部导航模块还能跳转入商品详情页，下单页，我的订单页等。

index.js代码如下

ReactDOM.render(
    <HashRouter>
        <div>
            <Route path="/" exact component={Supermarket} />
            <Route path="/app/:mID" component={App} />
            <Route path="/goodsDetail/:gID" component={GoodsDetail} />
            <Route path="/search/:mID" component={Search} />
            <Route path="/confirmOrder/:dataId" component={ConfirmOrder} />
            <Route path="/payment" component={Payment} />
            <Route path="/orderDetail" component={OrderDetail} />
            <Route path="/orderList" component={OrderList} />
            <Route path="/myFootprint" component={MyFootprint} />
            <Route path="/myFavorite" component={MyFavorite} />
            <Route path="/helpCenter" component={HelpCenter} />
        </div>
    </HashRouter>,
    document.getElementById('root'));

app.js代码如下：

render(){
        return(
            <div className="container app">
                <div className="content-hasfoot">
                    <Route path="/app/goodsList/:mID" exact component={GoodsList} />
                    <Route path="/app/classification/:mID" exact component={Classification} />
                    <Route path="/app/shoppingCar" exact component={ShoppingCar} />
                    <Route path="/app/main" exact component={Mine} />
                </div>
                {/* 底部导航 */}
                <div className="foot" flex="box:mean">
                    <NavLink to={`/app/goodsList/${this.state.marketInfoId}`} activeClassName={"foot-this"}>
                        <div className="foot-div" flex="dir:top main:center cross:center">
                            <span className="foot-icon iconfont icon-shouyeweidianjizhuangtai"></span>
                            <span className="foot-text">首页</span>
                        </div>
                    </NavLink>

                    <NavLink to={`/app/classification/${this.state.marketInfoId}`} activeClassName={"foot-this"}>
                        <div className="foot-div" flex="dir:top main:center cross:center">
                            <span className="foot-icon iconfont icon-fenleiweidianjizhuangtai"></span>
                            <span className="foot-text">分类</span>
                        </div>
                    </NavLink>

                    <NavLink to="/app/shoppingCar" activeClassName={"foot-this"}>
                        <div className="foot-div" flex="dir:top main:center cross:center">
                            <span className="foot-icon iconfont icon-gouwucheweidianjizhuangtai"></span>
                            <span className="foot-text">购物车</span>
                        </div>
                    </NavLink>

                    <NavLink to="/app/main" activeClassName={"foot-this"}>
                        <div className="foot-div" flex="dir:top main:center cross:center">
                            <span className="foot-icon iconfont icon-wodeweidianjizhuangtai"></span>
                            <span className="foot-text">我的</span>
                        </div>
                    </NavLink>
                </div>
            </div>
        )
    }

遇到的问题是：在Supermarket页面选择超市后应该如何跳转，跳转到/app,还是/app/goodList,
如果跳转到/app，我该如何默认加载首页？
如果跳转到/app/goodList，我该如何把超市id传到/app,并且将底部导航设为选中状态？

Answer 1

你这个/app/goodList，不应该是/app/:mId/goodList吗？这样就解决了第一个问题，第二个问题根据当前路由判断就行了