- 34
- 0
使用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,并且将底部导航设为选中状态?
- 共 0 条
- 全部回答
-
触碰岁月 普通会员 1楼
React Router v4是React Router的一个最新版本,它提供了更多的功能和更清晰的界面。以下是一个简单的React Router v4的路由配置示例:
```javascript import React from 'react'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import Home from './Home'; import About from './About';
function App() { return (
); }export default App; ```
在这个例子中,我们首先导入了React和Router DOM组件。然后,我们定义了一个名为App的React组件。在这个组件中,我们创建了一个Router对象,并在其中定义了一个Switch组件,用于处理不同的路由。
在Switch组件中,我们定义了两个路由。第一个路由的路径为"/",并且它的组件是Home。第二个路由的路径为"/about",并且它的组件是About。
最后,我们在App组件的render方法中,使用这些路由组件来渲染不同的页面。
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部
