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">
                <Menu.Item
                    as={NavLink} exact to="/"
                    name='homepage'
                    active={activeItem === 'homepage'}
                    onClick={this.handleClick}>
                    Home
                </Menu.Item>
                <Menu.Item
                    as={NavLink} exact to="/browse"
                    name='browse'
                    active={activeItem === 'browse'}
                    onClick={this.handleClick}>
                    Browse
                </Menu.Item>
                <Menu.Item
                    as={NavLink} exact to="/search"
                    name='search'
                    active={activeItem === 'search'}
                    onClick={this.handleClick}>
                    Search
                </Menu.Item>
                <Menu.Item
                    as={NavLink} exact to="/my-drinks"
                    name='my-drinks'
                    active={activeItem === 'my-drinks'}
                    onClick={this.handleClick}>
                    My Drinks
                </Menu.Item>
                </Menu>
        )
    }
}
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:

<Router>
    <Navigation className="Navigation" />
    <Container className="App">
        <Switch>
            <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} />
        </Switch>
    </Container>
</Router>

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!