Menu Component

import React from 'react';
import {BrowserRouter as Router, Switch, Route, Link} from "react-router-dom";

import Channel from '../channel/channel.js';

class Menu extends React.Component{
  constructor(props){
    super(props);
    this.state = {redirec:'/admin'};
  }

  mobileMenu = () => {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
      x.className += " responsive";
    } else {
      x.className = "topnav";
    }
  }
    
  render(){
    return(
      <Router>
        <div className="main-menu-outer">
          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></link>
          <nav className='main-menu region'>
            <div className="topnav" id="myTopnav">
              <Link id="house" to="/" className="active"><img alt="" src="/images/house.png" /></Link>
              <Link to="/news">News</Link>
              <Link to="/contact">Contact</Link>
              <Link to="/about">About</Link>
              <Link to='/login'>Login</Link>
              <Link to="/icon" className="icon" ><i className="fa fa-bars"></i></Link>
            </div>
          </nav>
        </div>
      
        <Switch>
          <Route path='/'>
            <Channel />
          </Route>
          <Route path='/news'></Route>
          <Route path='/contact'></Route>
          <Route path='/about'></Route>
          <Route path='/login'></Route>
          <Route path="/icon">
            {()=>{this.mobileMenu()}}
          </Route>
        </Switch>
      </Router>
    );
  }
}

export default Menu;

GitHub: "https://github.com/Sokhavuth/emultimedia
Heroku: https://khmerweb-emultimedia.herokuapp.com/