Ndtyjky

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, Switch}from '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!