Problem with MDBNavLink and react-router

Topic: Problem with MDBNavLink and react-router

gllermaly pro asked a week ago

*_Expected behavior_*MDBNavLink Working as usual in route component

*_Actual behavior_*

ERROR: You should not use <Route> or withRouter() outside a <Router>

Resources (screenshots, code snippets etc.)

I have App.js with

      <Route exact path="/" component={FormPage} />
      <Route component={LoggedRoutes} />

LoggedRoutes with:

    <TopNavigation />
    <Route exact path="/locales" component={Locales} />
    <Route exact path="/softland" component={Softland} />

and TopNavigation with:

  <MDBNavbar color="indigo" dark expand="md">
      <strong className="white-text">SIGO@SOFTLAND</strong>
    <MDBNavbarToggler onClick={this.toggleCollapse} />
    <MDBCollapse id="navbarCollapse3" isOpen={this.state.isOpen} navbar>
      <MDBNavbarNav left>
        <MDBNavItem active>
          <MDBNavLink to="/softland" className="white-text">

If I change MDBNavLink with Link works but styles messes up.



I tried to run an app with this code and it runs without problems.

Can you send me the full code snippet of your project? I should look through it to find the problem.

Best regards,

Aliaksandr from MDB.

gllermaly pro commented a week ago

This is the link to the project files : file is under components/navigation/TopNavigation , regards


The problem was in react-router-dom package version. Conflict arises with 5.0.0v and our <MDBNavLink> component. It will be fixed in near future.

But you can downgrade the version of react-router-dom by doing this:

1) delete node_modules folder and package-lock.json file.

2) in package.json file change the version of react-router-dom to, for example, 4.3.0.

3)run npm install or yarn

Or other the way you want to do it...

I fixed your <MDBNavbarNav> component code a little bit because it will be better to use

<MDBNavLink> inside <MDBNavItem>:

            <MDBNavbarNav left>
                    <MDBNavLink to="/locales" className="white-text mr-2">
                    <MDBNavLink to="/softland" className="white-text mr-2">
                    <MDBNavLink to="/" className="white-text">

And now can try to run your app.

Best regards,

Aliaksandr from MDB.

Please insert min. 20 characters.


Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: React
  • MDB Version: 4.11.1
  • Device: Macbook pro 2013
  • Browser: chrome
  • OS: macos sierra
  • Provided sample code: No
  • Provided link: No