React Material UI BottomNavigation component Routing Issue
Just got an implementation working!
The trick is to make a new navbar component that wraps the Material UI BottomNavigation
and exports it with the react-router-dom
's withRouter
higher order function. Then you can do some fiddling with the current route passed into the props and set the value of the BottomNavigation
component based on an array of routes (which route corresponds to which value).
My code works a bit differently than what you posted originally, I'm just going off of the BottomNavigation
example here and the example of usage with react-router-dom
here.
Here is my implementation:
/src/App.jsimport React, {Component} from 'react';
import './App.css';
import {BrowserRouter as Router, Route} from 'react-router-dom';
import PrimaryNav from './components/PrimaryNav';
// Views
import HomeView from './views/HomeView';
class App extends Component {
render() {
return (
<Router>
<div className="app">
<Route path="/" component={HomeView} />
<PrimaryNav />
</div>
</Router>
);
}
}
export default App;
/src/components/PrimaryNav.js
import React, {Component} from 'react';
import {Link, withRouter} from 'react-router-dom';
import BottomNavigation from '@material-ui/core/BottomNavigation';
import BottomNavigationAction from '@material-ui/core/BottomNavigationAction';
import LanguageIcon from '@material-ui/icons/Language';
import GroupIcon from '@material-ui/icons/Group';
import ShoppingBasketIcon from '@material-ui/icons/ShoppingBasket';
import HelpIcon from '@material-ui/icons/Help';
import EmailIcon from '@material-ui/icons/Email';
import './PrimaryNav.css';
class PrimaryNav extends Component {
state = {
value: 0,
pathMap: [
'/panoramas',
'/members',
'/shop',
'/about',
'/subscribe'
]
};
componentWillReceiveProps(newProps) {
const {pathname} = newProps.location;
const {pathMap} = this.state;
const value = pathMap.indexOf(pathname);
if (value > -1) {
this.setState({
value
});
}
}
handleChange = (event, value) => {
this.setState({ value });
};
render() {
const {value, pathMap} = this.state;
return (
<BottomNavigation
value={value}
onChange={this.handleChange}
showLabels
className="nav primary"
>
<BottomNavigationAction label="Panoramas" icon={<LanguageIcon />} component={Link} to={pathMap[0]} />
<BottomNavigationAction label="Members" icon={<GroupIcon />} component={Link} to={pathMap[1]} />
<BottomNavigationAction label="Shop" icon={<ShoppingBasketIcon />} component={Link} to={pathMap[2]} />
<BottomNavigationAction label="About" icon={<HelpIcon />} component={Link} to={pathMap[3]} />
<BottomNavigationAction label="Subscribe" icon={<EmailIcon />} component={Link} to={pathMap[4]} />
</BottomNavigation>
);
}
}
export default withRouter(PrimaryNav);
And here's my version numbers for good measure:
"@material-ui/core": "^1.3.1",
"@material-ui/icons": "^1.1.0",
"react": "^16.4.1",
"react-dom": "^16.4.1",
Just found a really neat solution for this here:
Essentially you just create a pathname
constant each render, using window.location.pathname
and make sure that the value prop of each <BottomNavigationAction />
is set to the same as the route (including preceding forward slash) ...something like:
const pathname = window.location.pathname
const [value, setValue] = useState(pathname)
const onChange = (event, newValue) => {
setValue(newValue);
}
return (
<BottomNavigation className={classes.navbar} value={value} onChange={onChange}>
<BottomNavigationAction component={Link} to={'/'} value={'/'} label={'Home'} icon={<Home/>} />
<BottomNavigationAction component={Link} to={'/another-route'} value={'/another-route'} label={'Favourites'} icon={<Favorite/>} />
</BottomNavigation>
)
This means the initial state for value
is always taken from the current URL.