Myujth

I wanted to put a different menu in my website, and I decided that NavBar would be a great pick, as it is part of the react library. I did everything successfully and integrated the menu into my website, but then I noticed that all of my links do not work (except the drop-down buttons).

Here is my code:

App.js

 import React, Component from 'react';
 import './App.css';
 import Header from './components/Header/Header.jsx';
 import HeaderTop from './components/HeaderTop/HeaderTop.jsx';
 import Home from './components/Home/Home.jsx';
 import SecondPage from './components/SecondPage/SecondPage.jsx';
 import BrowserRouter, Route, Switchfrom 'react-router-dom';
 import Footer from './components/Footer/Footer.jsx';
 import Menu from './components/Menu/Menu.jsx';

 class App extends Component 
 render() 
 return (

 <div>
 <div>
 <HeaderTop />
 <Menu />
 </div>
 <BrowserRouter>
 <Switch>
 <Route path="/" component=Home exact/>
 <Route path="/SecondPage" component=SecondPage exact/>
 </Switch>
 </BrowserRouter>
 <div>

 </div>
 </div>




 );
 
 

 export default App;

Menu.jsx

import React, Component from 'react';
import Navbar, NavbarBrand, NavbarNav, NavbarToggler, Collapse, NavItem, NavLink, Dropdown, DropdownToggle, DropdownMenu, DropdownItem from 'mdbreact';
import BrowserRouter as Router from 'react-router-dom';

class Menu extends Component 
 constructor(props) 
 super(props);
 this.state = 
 collapse: false,
 isWideEnough: false,
 dropdownOpen: false
 ;
 this.onClick = this.onClick.bind(this);
 this.toggle = this.toggle.bind(this);
 

 onClick()
 this.setState(
 collapse: !this.state.collapse,
 );
 

 toggle() 
 this.setState(
 dropdownOpen: !this.state.dropdownOpen
 );
 

 render() 
 return (
 <Router>
 <Navbar color="indigo" dark expand="md" scrolling>
 <NavbarBrand href="/">
 <strong>HOME</strong>
 </NavbarBrand>
 !this.state.isWideEnough && <NavbarToggler onClick = this.onClick />
 <Collapse isOpen = this.state.collapse navbar>
 <NavbarNav left>
 <NavItem active>
 <NavLink to="/">Home</NavLink>
 </NavItem>
 <NavItem>
 <NavLink to="/SecondPage">Features</NavLink>
 </NavItem>
 <NavItem>
 <NavLink to="#">Pricing</NavLink>
 </NavItem>
 <NavItem>
 <Dropdown isOpen=this.state.dropdownOpen toggle=this.toggle>
 <DropdownToggle nav caret>Dropdown</DropdownToggle>
 <DropdownMenu>
 <DropdownItem href="/SecondPage">Action</DropdownItem>
 <DropdownItem href="#">Another Action</DropdownItem>
 <DropdownItem href="#">Something else here</DropdownItem>
 <DropdownItem href="#">Something else here</DropdownItem>
 </DropdownMenu>
 </Dropdown>
 </NavItem>
 </NavbarNav>
 <NavbarNav right>
 <NavItem>
 <form className="form-inline md-form mt-0">
 <input className="form-control mr-sm-2 mb-0 text-white" type="text" placeholder="Search" aria-label="Search"/>
 </form>
 </NavItem>
 </NavbarNav>
 </Collapse>
 </Navbar>
 </Router>
 );
 

export default Menu;

The routes I am using are '/' and 'SecondPage' for testing purposes. If I change it to it will work, but won't work for the menu. I am rather new to React, so any help will be appreciated! Thanks in advance!