Topic: Routing not wirking with navigation Bar

Refka yakoubi free asked 4 years ago

Hello ,

Navigation is not working even clicking url change but still always in the home page , any help please ? this is my code :


                          "name": "afspm-front",
                           "version": "0.1.0",
                            "private": true,
                        "dependencies": {
                     "@testing-library/jest-dom": "^4.2.4",
                    "@testing-library/react": "^9.3.2",
                    "@testing-library/user-event": "^7.1.2",
                    "mdbreact": "^4.25.1",
                    "node-sass": "^4.13.1",
                    "react": "^16.12.0",
                    "react-dom": "^16.12.0",
                    "react-router": "^5.1.2",
                     "react-router-dom": "^5.1.2",
                        "react-scripts": "3.3.1"


            import React, { Component } from "react";
        import {
        MDBNavbar, MDBNavbarBrand, MDBNavbarNav, MDBNavItem, MDBNavLink,                         MDBNavbarToggler, 
                MDBCollapse, MDBFormInline,
            } from "mdbreact";
        import { BrowserRouter as Router } from 'react-router-dom';

            export default class NavbarPage extends Component {
                    state = {
                  isOpen: false

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

                                render() {
                                  return (
                                  <MDBNavbar color="indigo" dark expand="md">
                                  <strong className="white-text">SmartPM</strong>
                            <MDBNavbarToggler onClick={this.toggleCollapse} />
                        <MDBCollapse id="navbarCollapse3" isOpen={this.state.isOpen}         navbar>
                                          <MDBNavbarNav left>
                                        <MDBNavItem >
                  <MDBNavLink to="/home">Home</MDBNavLink>
                <MDBNavLink to="/cat">Categories</MDBNavLink>
                <MDBNavLink to="/product">Products</MDBNavLink>
                                        <MDBNavItem >
                      <MDBNavLink to="#!">Cantact Us</MDBNavLink>
                      <MDBNavbarNav right>

                          <MDBIcon icon="power-off"  size="lg" className="white-text pr-3" />



                            import React from 'react';
                            import { BrowserRouter , Switch, Route } from "react-router-dom";
                             import './App.css';
                            import HomePage from './Component/HomePage';
                           import Categories from './Component/Categories';

                            function App() {
                                  return (<div>
                                <div className="App">

                            <Route exact path='/' component={HomePage} />
                            <Route exact path='/home' component={HomePage} />
                            <Route  exact path='/cat' component={Categories} />



                                export default App;

Jakub Chmura staff answered 4 years ago

Hi @Refka yakoubi,

You need to delete < Router> from your NavBar.jsx component and it should work fine.

Best, Kuba

caseydev free commented 3 years ago

Thank you!! I was stuck on this for far too long.

caseydev free commented 3 years ago

Thank you!! I was stuck on this for far too long.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.25.1
  • Device: dell
  • Browser: chrome
  • OS: windows
  • Provided sample code: No
  • Provided link: No