React actual operation project –02 e-commerce system bottom navigation, Router

I. Project structure

This is the third day of my participation in the August More text Challenge. For details, see:August is more challenging.

1.Initialize the style in the public global CSS, set the background to gray, and make rem fit for mobile *{margin:0px; padding:0px; } ul,li{list-style-type:none; } input{outline: none; border-radius: 0px; border:0none; } html,body { font-size: 20px! important; min-height:100%;
    overflow-x:hidden;
    background-color: #f5f5f9;
   -webkit-tap-highlight-color:rgba(0.0.0.0); Disable link highlighting */     
   -webkit-touch-callout:none;    /* Disable link long press popup option */
}
@media screen and (min-width: 400px) {
    html,body {
        font-size: 21.3px! important; } } @media screen and (min-width: 414px) { html,body { font-size:22.08px! important; } } @media screen and (min-width: 480px) { html,body { font-size:25.6px! important; } } @media screen and (min-width: 768px) { html,body { font-size:40.96px!important;
    }
}
2.Write a 50px bottom navigation bar in home.css. Footer-nav {position: fixed;
    bottom: 0;
    width: 100%;
    height: 2.5rem;
    background-color: #fff;
}
home/index.js
import React from 'react';
import Css from '.. /.. /.. /assets/css/home/home/index.css';
export default class  IndexComponent extends React.Component{
    componentDidMount(){}render(){
        return(
            <div class="app">Home page<div className={Css['footer-nav']} ></div>
            </div>); }}Copy the code

The basic style of the bottom navigation bar is fine

Use flex layout to make the navigation bar static

home/index.js
import React from 'react';
import Css from '.. /.. /.. /assets/css/home/home/index.css';
export default class  IndexComponent extends React.Component{
    componentDidMount(){}render(){
        return(
            <div class="app">Home page {/* Bottom navigation bar */}<div className={Css['footer-nav']} >
                    <div className={Css['footer-nav-item']} >
                        <div className={Css['footer-nav-item-icon'] + ' '+Css['home'] + ' '+Css['active']} ></div>
                        <div className={Css['footer-nav-item-title'] + ' '+Css['active']} >Home page</div>
                    </div>
                    <div className={Css['footer-nav-item']} >
                        <div className={Css['footer-nav-item-icon'] + ' '+Css['cart']} ></div>
                        <div className={Css['footer-nav-item-title']} >The shopping cart</div>
                    </div>
                    <div className={Css['footer-nav-item']} >
                        <div className={Css['footer-nav-item-icon'] + ' '+Css['my']} ></div>
                        <div className={Css['footer-nav-item-title']} >my</div>
                    </div>
                </div>
            </div>
        );
    }
}
home/index.css
.footer-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 2.5rem;
    background-color: #fff;
    z-index: 10;
    box-shadow: 0 0 10px rgba(239.239.239.1);
}
.footer-nav .footer-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.footer-nav .footer-nav-item .footer-nav-item-icon {
    width: 1.4rem;
    height: 1.4rem;
}

.footer-nav .footer-nav-item .footer-nav-item-title {
    font-size: 0.6rem;
}

.footer-nav .footer-nav-item .footer-nav-item-title.active {
    color: #eb1625;
}

.footer-nav .footer-nav-item .footer-nav-item-icon.home {
    background: url(".. /.. /.. /images/common/home1.png");
    background-size: 100% 100%;
}

.footer-nav .footer-nav-item .footer-nav-item-icon.home.active {
    background: url(".. /.. /.. /images/common/home2.png");
    background-size: 100% 100%;
}

.footer-nav .footer-nav-item .footer-nav-item-icon.cart {
    background: url(".. /.. /.. /images/common/cart1.png");
    background-size: 100% 100%;
}

.footer-nav .footer-nav-item .footer-nav-item-icon.cart.active {
    background: url(".. /.. /.. /images/common/cart2.png");
    background-size: 100% 100%;
}

.footer-nav .footer-nav-item .footer-nav-item-icon.my {
    background: url(".. /.. /.. /images/common/my1.png");
    background-size: 100% 100%;
}

.footer-nav .footer-nav-item .footer-nav-item-icon.my.active {
    background: url(".. /.. /.. /images/common/my2.png");
    background-size: 100% 100%;
}
Copy the code

The static effect is complete

Configure the child route of the home page

In the router. In jsreturn(
    <React.Fragment>
        <Router>
            <React.Fragment>
                <Switch>
                    <Route  path="/home" component={HomeComponent} ></Route>
                </Switch>
            </React.Fragment>
        </Router>
    </React.Fragment>) in the home/index. In jsimport asyncComponents from '.. /.. /.. /components/async/AsyncComponent';
const IndexComponent=asyncComponents(() = >import('.. /index/index'));
<React.Fragment>
    <Switch>
        <Route path={'/home/index'} component={IndexComponent}></Route>
    </Switch>
</React.Fragment>

// In the child route index/index.js
import React from 'react';
import Css from '.. /.. /.. /assets/css/home/index/index.css';
export default class  IndexComponent extends React.Component{
    componentDidMount(){
        console.log($(".app").html());
    }
    render(){
        return(
            <div>Home page</div>); }}Copy the code

The first child route is configured

Iii. Route redirection

<Route  path="/home" component={HomeComponent} ></Route>
<Redirect to={'/home/index'} ></Redirect>
Copy the code

When you enter a route to /, it is automatically redirected to /home/index

Next, do a route configuration, distinguish devUrl and proURL, the root directory can be configured to facilitate the deployment of later projects

js/conf/config.js
let prodUrl="http://vueshop.glbuys.com";
let devUrl="http://vueshop.glbuys.com";
let baseUrl=process.env.NODE_ENV==='development'? devUrl:prodUrl;export default {
    baseUrl:baseUrl,
    path:"/".token:"1ec949a15fb709370f"
}
Copy the code

We will then modify the root path of our previous route, the path in the config

<Route  path={config.path + 'home'}  component={HomeComponent} ></Route>
<Redirect to={config.path  + 'home/index'} ></Redirect>
Copy the code

4. Route click event + refresh the default TAB

import React from 'react';
import Css from '.. /.. /.. /assets/css/home/home/index.css';
import {Route, Switch} from "react-router-dom";
import asyncComponents from '.. /.. /.. /components/async/AsyncComponent';
import config from ".. /.. /.. /assets/js/conf/config";
const IndexComponent=asyncComponents(() = >import('.. /index/index'));
const CartComponent=asyncComponents(() = >import('.. /cart/index'));
const UserComponent=asyncComponents(() = >import('.. /.. /user/index/index'));
export default class  HomeComponent extends React.Component{
    componentWillMount() {
        this.refreshDefaultTab()
    }

    componentDidMount(){}constructor(props) {
        super(props);
        this.state = {
            tabIndex: 0}}/ / switch TAB
    goPage(url) {
        console.log(url,'7777')
        this.props.history.replace(url)
        let index = this.getTabIndex(url)
        this.setState({
            tabIndex: index
        })
    }
    // Get the page index
    getTabIndex(url){
        let index = 0
        switch (url) {
            case '/home/index':
                index = 0
            break
            case '/home/cart':
                index = 1
            break
            case '/home/my':
                index = 2
            break
            default:
                index = 0
        }
        return index
    }
    // Refresh select the default TAB
    refreshDefaultTab() {
        let index = this.getTabIndex(this.props.history.location.pathname)
        this.setState({
            tabIndex: index
        })
    }
    render(){
        return(
            <div class="app">
                <React.Fragment>
                    <Switch>
                        <Route path={config.path + 'home/index'} component={IndexComponent}></Route>
                        <Route path={config.path + 'home/cart'} component={CartComponent}></Route>
                        <Route path={config.path + 'home/my'} component={UserComponent}></Route>
                    </Switch>
                </React.Fragment>{/* Bottom navigation bar */}<div className={Css['footer-nav']} >
                    <div className={Css['footer-nav-item']} onClick={this.goPage.bind(this,'/home/index')} >
                        <div className={this.state.tabIndex= = =0 ?  Css['footer-nav-item-icon'] + ' '+Css['home'] + ' '+Css['active']: Css['footer-nav-item-icon'] + ' '+Css['home']} ></div>
                        <div className={this.state.tabIndex= = =0 ? Css['footer-nav-item-title'] + ' '+Css['active'] : Css['footer-nav-item-title']} >Home page</div>
                    </div>
                    <div className={Css['footer-nav-item']} onClick={this.goPage.bind(this,'/home/cart')} >
                        <div className={this.state.tabIndex= = =1 ? Css['footer-nav-item-icon'] + ' '+Css['cart'] + ' '+Css['active'] : Css['footer-nav-item-icon'] + ' '+Css['cart'] }></div>
                        <div className={ this.state.tabIndex= = =1 ? Css['footer-nav-item-title'] + ' '+Css['active']: Css['footer-nav-item-title']} >The shopping cart</div>
                    </div>
                    <div className={Css['footer-nav-item']} onClick={this.goPage.bind(this,'/home/my')} >
                        <div className={this.state.tabIndex= = =2 ? Css['footer-nav-item-icon'] + ' '+Css['my'] + ' '+Css['active'] : Css['footer-nav-item-icon'] + ' '+Css['my']} ></div>
                        <div className={this.state.tabIndex= = =2 ? Css['footer-nav-item-title'] + ' '+Css['active']: Css['footer-nav-item-title'] }>my</div>
                    </div>
                </div>
            </div>); }}Copy the code

Git address github.com/liujun8892/…