CODEWITHSUNDEEP
reactjsreact-routerreact-router-v4react-router-dommdbreact
Roee Angel
Roee Angel

Reputation: 201

Link tag in React NavBar not navigating to the correct page

I am new to React and am using Material Design for Bootstrap (MDB) to create a NavBar component for my app. I have updated the Link tags in the NavBar to point to my own routes, but when I click on the links, the URL changes in the address bar, but the page does not update.

I am using React Router for routing, and I have not encountered this problem before. The strange thing is that I have another Link tag in my app that works perfectly fine, but the ones in the NavBar do not.

Here is my code:

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router} from "react-router-dom";
import '@fortawesome/fontawesome-free/css/all.min.css';
import 'bootstrap-css-only/css/bootstrap.min.css';
import 'mdbreact/dist/css/mdb.css';
import App from './App';

    ReactDOM.render(
            <Router>
            <App/>
            </Router>
        ,document.getElementById('root'));

app.js

import React from 'react';
import { BrowserRouter as Router, Route,Switch} from "react-router-dom";
import { Link } from "react-router-dom";
import Home from './pages/Home';
import Courses from './pages/Courses'
import Navbar from './components/Navbar'
import Signin from './pages/Sign-in'
import Register from './pages/Register'
import ErrorPage from './components/ErrorPage'
import SingleCourse from './pages/SingleCourse'
import './App.css'
import {
  MDBContainer,
} from 'mdbreact';
import Footer from './components/Footer'
function App() {
  return (
      <>
      <Navbar/>

      <MDBContainer>
      
      <Switch>

        <Route exact path="/" component={Home}/>
        <Route exact path="/courses" component={Courses}/>
        <Route exact path="/courses/:id" component={SingleCourse}/>
        <Route path="/sign-in" component={Signin}/>
        <Route path="/register" component={Register}/>
        <Route component={ErrorPage}/>
      </Switch>
      </MDBContainer>
      <Footer/>
      </>
  );
}

export default App;

NavBar

import React, { Component } from "react";
import { Link,BrowserRouter as Router } from "react-router-dom";
import Home from '../pages/Home'
import {
MDBNavbar, MDBNavbarBrand, MDBNavbarNav, MDBNavItem, MDBNavLink, MDBNavbarToggler, MDBCollapse, MDBFormInline,
MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem
} from "mdbreact";
class NavbarPage extends Component {
state = {
  isOpen: false
};

toggleCollapse = () => {
  this.setState({ isOpen: !this.state.isOpen });
}
handleClick() {
  ;
}

render() {
  return (
    <Router>
      <MDBNavbar className="Navbar"  dark expand="md" style={{backgroundImage: "linear-gradient(" + "to left, #D53D96  , #7A2A90"+" )"}}>
        <MDBNavbarBrand>
          <strong className="white-text">Navbar</strong>
        </MDBNavbarBrand>
        <MDBNavbarToggler onClick={this.toggleCollapse} />
        <MDBCollapse id="navbarCollapse3" isOpen={this.state.isOpen} navbar>
          <MDBNavbarNav left>
            <MDBNavItem >
              <MDBNavLink to="/"> ////////HERE iS THE PROBLEM(I Change It Many Times!)
              Home
              </MDBNavLink>
            </MDBNavItem>
            <MDBNavItem>
              <MDBDropdown>
                <MDBDropdownToggle nav caret>
                  <span className="mr-2">Courses</span>
                </MDBDropdownToggle>
                <MDBDropdownMenu>
                  <MDBDropdownItem href="#!">Action</MDBDropdownItem>
                  <MDBDropdownItem href="#!">Another Action</MDBDropdownItem>
                  <MDBDropdownItem href="#!">Something else here</MDBDropdownItem>
                  <MDBDropdownItem href="#!">Something else here</MDBDropdownItem>
                </MDBDropdownMenu>
              </MDBDropdown>
            </MDBNavItem>
            
            <MDBNavItem>
            <MDBFormInline waves>
              <div className="md-form my-0">
                <input className="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
              </div>
            </MDBFormInline>
          </MDBNavItem>
          </MDBNavbarNav>
          <MDBNavbarNav right>
          <MDBNavItem>
          <MDBNavLink to="#!">My Courses</MDBNavLink>
        </MDBNavItem>
            <MDBNavItem>
              <MDBNavLink to="#!">Personal Info</MDBNavLink>
            </MDBNavItem>
          </MDBNavbarNav>
        </MDBCollapse>
      </MDBNavbar>
    </Router>
    );
  }
}

export default NavbarPage;

Upvotes: 1

Views: 1257

Answers (3)

Jibin Francis
Jibin Francis

Reputation: 348

Try removing the BrowserRouter or Router( in your case) tag from all others except the index.js. Then I think this will work fine.

Upvotes: 4

Hardy
Hardy

Reputation: 5631

You shouldn't have <Router> in your Navbar. It's already on Index.js Check: https://reacttraining.com/react-router/core/api/Router

and change Navbar and Footer to be inside MDBContainer like:

     <>

  <MDBContainer>

  <Navbar/>

  <Switch>
    <Route exact path="/" component={Home}/>
    <Route exact path="/courses" component={Courses}/>
    <Route exact path="/courses/:id" component={SingleCourse}/>
    <Route path="/sign-in" component={Signin}/>
    <Route path="/register" component={Register}/>
    <Route component={ErrorPage}/>
  </Switch>
  <Footer/>
  </MDBContainer>

  </>

because those are using MDB components.

Upvotes: 1

nachoiacovino
nachoiacovino

Reputation: 15

You don't need to import BrowserRouter multiple times, one time on the index.js file is enough for the whole app. Your "/" path is not related to the "/" path on your App.js file, delete the Router on the NavBar component and it should work fine.

Upvotes: 1

Related Questions