Topic: You should not use <Route> or withRouter() outside a <Router>
I use react-router-dom as a link page linking. And that's why I'm getting an error that I think is. I am not receiving an error when I use the Link component of the react-router-dom structure instead of MDBNavLink.
For example, I am getting an error when using this way;
<MDBNavLink to="#" className={this.state.activeItemOuterTabs==="2" ? "active" : "" } onClick={this.toggleOuterTabs("2")} role="tab"> Follow
But I can't get an error when I use it as follows;
<Link to="#" className={this.state.activeItemOuterTabs==="2" ? "active" : "" } onClick={this.toggleOuterTabs("2")} role="tab"> Follow
For this reason I cannot use the MDB' s CSS properties.
I'm having the same issue with the MDBNavLink as well. I had my routing all ready in place as a component. Should I be putting all my Navigation code in the index.js for that to work?
Jakub Mandra staff commented 5 years ago
Hi,
Probable scenarios: - you use BrowserRouter twice, which collides and leads to the errors, - you have react-router-dom v.5 installed - mdbreact isn't compatible with this version yet
It would be best if you share your code with us, so we could debug.
Best,
Jakub
Hi threre,
I have just checked the Tabs code snippet, and for me, everything works fine - I wasn't able to recreate your problem. Do you use react-router-dom Route component as a wrapper for a root component of your application? Please provide us with your code, including the content of index.js file.
Best,
Ania
MSC free commented 5 years ago
I solved the problem. I think the new version of react-router-dom is due to the newer version 5.0.0. The problem disappeared when I pulled back to react-router-dom@4.1.3.
Anna Morawska staff commented 5 years ago
Thank you for sharing that with us, I will investigate it further
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB React
- MDB Version: 4.11.1
- Device: Dell
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No