账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    react-router v4 路由配置
    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
    打赏
    收藏
    点击回答
        全部回答
    • 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方法中,使用这些路由组件来渲染不同的页面。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部