Как составить компонент грамотно?

import React, { Component } from 'react';
import { Switch, Route } from 'react-router-dom';
import './App.css';
import Menu from "./components/menu/Menu";
import Home from "./components/pages/home/Home";
import Contacts from "./components/pages/contacts/Contacts";
import About from "./components/pages/about/About";
import Projects from "./components/pages/projects/Projects";

class App extends Component {
  render() {
    return (
      <div className="App">
        <Menu/>
        <main>
          <Switch>
            <Route exact path="/" component={Home}/>
            <Route path="/about" component={About}/>
            <Route path="/projects" component={Projects}/>
            <Route path="/contacts" component={Contacts}/>
          </Switch>
        </main>
      </div>
    );
  }
}

export default App;

import React, { Component } from 'react';
import { Link, withRouter } from 'react-router-dom';
import './Menu.css';

class Menu extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isOpen: false,
        };
    }

    componentWillMount() {
        this.props.history.listen(() => {
            // view new URL
            console.log('New URL', this.props.history.location.pathname);
        });
    }

    render() {
        const paths = [
            {
                title: 'Главная',
                link: '/'
            },
            {
                title: 'О нас',
                link: '/about'
            },
            {
                title: 'Проекты',
                link: '/projects'
            },
            {
                title: 'Контакты',
                link: '/contacts'
            },
        ];

        let
            currPath = this.props.history.location.pathname,
            currPathIndex = paths.findIndex(n => n.link === currPath);

        let
            isPrev = currPathIndex !== 0,
            isNext = currPathIndex !== paths.length - 1;

        let closeBtn = <Link className="close-btn" onClick={ () => {this.setState({isOpen: !this.state.isOpen})} } style={ this.state.isOpen ? {visibility: 'visible', opacity: '1', zIndex: '2'} : {visibility: 'hidden', opacity: '0'} } to="#"/>;

        return (
            <div>
                <nav>
                    <a className="menu-btn" onClick={ () => {this.setState({isOpen: !this.state.isOpen})} } style={ this.state.isOpen ? {visibility: 'hidden'} : null}>
                        <span>Меню</span>
                    </a>
                    { this.state.isOpen ? closeBtn : null }
                    {isNext ? (
                        <Link className="next_btn" style={ this.state.isOpen ? {visibility: 'hidden'} : null} to={paths[currPathIndex + 1].link}>
                            <span>{ paths[currPathIndex + 1].title }</span>
                        </Link>
                    ) : null}
                    {isPrev ? (
                        <Link className="prev_btn" style={ this.state.isOpen ? {visibility: 'hidden'} : null} to={paths[currPathIndex - 1].link}>
                            <span>{ paths[currPathIndex - 1].title }</span>
                        </Link>
                    ) : null}
                </nav>

                <div className="menu_frame" style={ this.state.isOpen ? {opacity: '1', zIndex: '2', transition: 'opacity 750ms ease 0s'} : {opacity: '0', zIndex: '-1', transition: 'all 500ms ease 0s' }}>
                    menu is opened.

                    <br/>

                    <strong>Route is:</strong> <i>{ this.props.history.location.pathname }</i>
                </div>
            </div>
        );
    }
}

export default withRouter(Menu);