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.
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 commented 6 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 6 years ago
Thank you for sharing that with us, I will investigate it further
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 premium commented 6 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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: 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