Topic: Invariant failed: You should not use NavLink outside a Router
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.
<Router>
MDBNavbar color="indigo' dark expand="md"> . .
This is your supplied example code. It fails. I am not making any changes to it. https://mdbootstrap.com/docs/react/navigation/navbar/
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 5 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.
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
hi @davidkjackson,
Sorry for problems, in next monday (22.07) we fix NavBar documentaction.
Best regards, Konrad.
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 5 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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- 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
wallen portal commented 5 years ago
This has not yet worked for me
Konrad Stępień staff commented 5 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-domfor our package and we already had a problem with the router.But I waiting for more information from you. Best regards, Konrad.