use react to build a shopping webAPP, route similar to Taobao using react-router4, the page jump logic is as follows:
1, enter the supermarket list page by default, select the supermarket, click on the supermarket to jump to the APP page
2, the APP page includes four bottom navigation: home page, category, shopping cart and mine, load my
3 by default, jump to the product details page from the four bottom navigation modules, issue the order page, my order page, and so on.
the index.js code is as follows
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"));the app.js code is as follows:
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>
)
} the problem encountered is: how should I jump to / app, or / app/goodList, after selecting a supermarket on the Supermarket page?
how do I load the home page by default if I jump to / app,?
if I jump to / app/goodList, how can I send the supermarket id to / app, and set the bottom navigation to be selected?