Invariant failed: You should not use NavLink outside a Rou

Topic: Invariant failed: You should not use NavLink outside a Router

davidkjackson asked 3 years ago

Trialing MDBootstrap to see if it meets my needs.I installed the downloaded MDBootstrap version. Followed the 5 minute getting started video and the demo works fine.I then ran npm run -remove-demo and then deleted the contents of app.js and copied and pasted one of the other example show in the 5 minute demo. ran npm start and it all works fine. Exactly as per the 5 minute video.I then deleted the contents of app.js again and this time I copied and pasted the Navigation - Navbar - the 'React Bootstrap navbar' and I chose the 'Basic Example' and pasted that into app.js. This time it fails every time with: Invariant failed: You should not use <Navlink> outside a <Router>

This is easily able to be recreated.I have found that if I do this:

import { BrowserRouter as Router } from 'react-router-dom'; 

and wrap the entire provided code with <Router> - this then works. So there is a bug in the supplied sample code.


MDBNavbar color="indigo' dark expand="md"> . .

wallen portal commented 3 years ago

This has not yet worked for me

Konrad Stępień staff commented 3 years ago

Hi @wallen portal,

Can you make a new post with your problem? Please write about your problem and paste code/images. I will try to help you.

Probably this problem is from our dependencies. Because we did import react-router-dom for our package and we already had a problem with the router.

But I waiting for more information from you. Best regards, Konrad.

This is your supplied example code. It fails. I am not making any changes to it.

to get your code to work I have to wrap < Router > around your code. So this is not just a documentation issue but your supplied code doesn't work as is. Hence, I am asking if you will be fixing your code?

Just to be clear. I am NOT doing anything. I am using one of your supplied samples and I am not making any code changes. Your supplied sample when copied into the empty app.js does not work.

It gives the above error. I am simply following your '5 minute video tutorial'.

Will you be fixing your supplied sample and any others that have the same problem?

'Error: Invariant failed: You should not use <NavLink> outside a <Router>

Hello, i am also having this above issue at present when i tried downloading > React Admin Dashboard Template – React & Material Design , how can i resolve this .Thank you

Konrad Stępień staff commented 3 years ago

Hi @daniel imodoye,

You have to use inside your project. Probably you didn't use it. You can use him as a wrapper for your page or component.

Best regards, Konrad.

Konrad Stępień staff answered 3 years ago

Hi @davidkjackson,

We sorry for problems, but in the next release, we will update documentation, because if you want to use MDBNav with MDBNavLink you need import

 import { BrowserRouter as Router } from 'react-router-dom';

in your app.js file. It should not be imported in another file and hence the situation. However, we will take care of it and it will be improved. Thank you for reporting the error and best regards, Konrad

The same problem exists in the MDB Pro React NavBar sample code .

Konrad Stępień staff answered 3 years ago

hi @davidkjackson,

Sorry for problems, in next monday (22.07) we fix NavBar documentaction.

Best regards, Konrad.

canazo answered 3 years ago

Hello. I'm having the same problem with the admin dashboard free for react

I'm interested in buying the Small Bundle : MDB Pro + Admin Template 30% off React version but I need to know if I'm going to run into these kind of errors with it. Also I need to know how fast MDB Pro React version is because I'm going to use it in a heavy traffic website.

Thank you

Konrad Stępień staff commented 3 years ago

Hi @canazo,

You can look at our admin demo app for version pro or admin demo app free.

The above examples particularly apply to the navigation panel. But we have already prepared two demo applications for the administrative panel.

Best regards, Konrad.

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
  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.8.5
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No