Creating a Navigation Bar with Semantic UI

I recently completed a project using React for my coursework with Flatiron School, and I chose to use the Semantic framework for styling. One of the elements offered by Semantic is a menu, which I implemented for my navigation bar — the end result looks like this:

The styling from Semantic includes mouseover and selection effects, resulting in that light grey background when a menu item is “active.” It works nicely with react-router-dom, allowing me to designate each menu item as a NavLink, as you can see in the entirety of my code for the navigation bar:

import React, { Component } from 'react';
import { Menu } from 'semantic-ui-react';
import { NavLink } from 'react-router-dom';
class Navigation extends Component {
state = {
activeItem: 'homepage'
handleClick = (e, { name }) => {
this.setState({ activeItem: name })
render() {
const { activeItem } = this.state
return (
<Menu className="Navigation">
as={NavLink} exact to="/"
active={activeItem === 'homepage'}
as={NavLink} exact to="/browse"
active={activeItem === 'browse'}
as={NavLink} exact to="/search"
active={activeItem === 'search'}
as={NavLink} exact to="/my-drinks"
active={activeItem === 'my-drinks'}
My Drinks
export default Navigation;

The component’s state keeps track of which menu item is active, i.e. which item should have the “active” styling applied to it. A simple onClick event updates the state to the selected route when each tab is clicked. Meanwhile routing is handled in my top-level App.js component:

<Navigation className="Navigation" />
<Container className="App">
<Route exact path="/" component={Home} />
<Route exact path="/browse" component={BrowsePage} />
<Route exact path="/search" component={SearchPage} />
<Route exact path="/my-drinks" component={MyDrinks} />
<Route exact path="/drink/:drinkId" component={DrinkDetails} />

App.js creates my routes, and my navigation bar component knows which routes correspond to each menu button. Nice styling and clean navigation in two easy components!