准备:下载 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 appThis={this}></FooterNav>
</div>
);
}
}
export default App;
接着,在FooterNav.jsx中
import React from 'react';
import PropTypes from 'prop-types';
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';
import './style.scss'
class FooterNav extends React.Component {
state = {
value: 0,
};
static propTypes = {
appThis: PropTypes.object.isRequired,
}
componentWillMount(){
//处理页面刷新时value重置的问题
var current=this.props.appThis.props.location.pathname;
if(current=='/home'){
this.setState({ value:0 });
}else if(current=='/goods'){
this.setState({ value:1 });
}else if(current=='/account'){
this.setState({ value:2 });
}
}
handleChange = (event, value) => {
this.setState({ value });
var routerName='';
if(value==0){
routerName='/home'
}else if(value==1){
routerName='/goods'
}else if(value==2){
routerName='/account'
}
this.props.appThis.props.history.push(routerName);
};
render() {
const { value } = this.state;
const { classes } = this.props;
return (
<div id="FooterNav">
<BottomNavigation
value={value}
onChange={this.handleChange}
showLabels
>
<BottomNavigationAction label="首页" icon={<HomeIcon />} />
<BottomNavigationAction label="分类" icon={<DashboardIcon />} />
<BottomNavigationAction label="个人" icon={<FaceIcon />} />
</BottomNavigation>
</div>
);
}
}
export default FooterNav;