material-ui的BottomNavigation的使用

準備：下載 npm i @material-ui/core @material-ui/icons

這裏在單獨將BottomNavation再次封裝組件使用(使用了react父子通信的知識)：

因爲底部導航通常是作爲公共出現的佈局，所以這裏放在app.jsx中

import React, { Component } from 'react';
import {Link,Route,Switch,Redirect} from "react-router-dom";
import Home from './views/home/Home.jsx'
import Account from './views/account/Account.jsx'
import Goods from './views/goods/Goods.jsx'
import './App.scss';
import FooterNav from './components/smallComponents/footerNav.jsx'

class App extends Component {
  changeRoute=(routerName)=>{
      this.props.history.push(routerName);
  }

  render() {
    return (
        <div id="App">
            <div id='AppMain'>
                <Switch>
                    <Route path="/home" component={Home}/>
                    <Route path="/goods" component={Goods}/>
                    <Route path="/account" component={Account}/>
                    <Redirect to='/home' />
                </Switch>
            </div>
            <FooterNav FooterNavChange={this.changeRoute}></FooterNav>
        </div>
    );
  }
}

export default App;

接着，在FooterNav.jsx中

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import BottomNavigation from '@material-ui/core/BottomNavigation';
import BottomNavigationAction from '@material-ui/core/BottomNavigationAction';
import HomeIcon from '@material-ui/icons/Home';
import DashboardIcon from '@material-ui/icons/Dashboard';
import FaceIcon from '@material-ui/icons/Face';


const styles = {
    footerNav: {
        'position':'fixed',
        'bottom':0,
        'width':'100%'
    },
};
class FooterNav extends React.Component {
    state = {
        value: 0,
    };

    handleChange = (event, value) => {
        this.setState({ value });//控制active的切換
        var routerName='';
        if(value==0){
            routerName='/home'
        }else if(value==1){
            routerName='/goods'
        }else if(value==2){
            routerName='/account'
        }
        this.props.FooterNavChange(routerName);
    };
    static propTypes = {
        FooterNavChange: PropTypes.func.isRequired,
    }
    render() {
        const { value } = this.state;
        const { classes } = this.props;
        return (
            <BottomNavigation
                value={value}
                onChange={this.handleChange}
                showLabels
                className={classes.footerNav}
            >
                <BottomNavigationAction label="首頁" icon={<HomeIcon />} />
                <BottomNavigationAction label="分類" icon={<DashboardIcon />} />
                <BottomNavigationAction label="個人" icon={<FaceIcon />} />
            </BottomNavigation>
        );
    }
}



export default withStyles(styles)(FooterNav);