Topic: Problem with MDBNavLink and react-router
                  
                  gllermaly
                  free
                  asked 6 years 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
  <Router>
    <Switch>
      <Route exact path="/" component={FormPage} />
      <Route component={LoggedRoutes} />
    </Switch>
  </Router>
LoggedRoutes with:
  <div>
    <TopNavigation />
    <Route exact path="/locales" component={Locales} />
    <Route exact path="/softland" component={Softland} />
  </div>
and TopNavigation with:
  <MDBNavbar color="indigo" dark expand="md">
    <MDBNavbarBrand>
      <strong className="white-text">SIGO@SOFTLAND</strong>
    </MDBNavbarBrand>
    <MDBNavbarToggler onClick={this.toggleCollapse} />
    <MDBCollapse id="navbarCollapse3" isOpen={this.state.isOpen} navbar>
      <MDBNavbarNav left>
        <MDBNavItem active>
          <MDBNavLink to="/softland" className="white-text">
            Test
          </MDBNavLink>
        </MDBNavItem>
      </MDBNavbarNav>
    </MDBCollapse>
  </MDBNavbar>
If I change MDBNavLink with Link works but styles messes up.
thanks
                      
                      Jakub Chmura
                      staff
                        answered 5 years ago
                    
I suggest you to use navLink from  react-router-dom to your navigation.
You have sent us an incomplete example, I cannot help you based on this code, but I think the problem may be the incorrect use of the router. Check thereact-router-dom tutorial on the Internet, because I can't explain you how it works with a few words at the forum.
Best regards,
Kuba
                      
                      Siva Krishna Vegi
                      free
                        answered 5 years ago
                    
hey hi i'm trying to navigate to another page(News) as per the documentation .but it is not moving to another page nor giving me a error.kindly suggest me a way to route to another page. News News
complete code :import React, { Component } from "react";import {MDBNavbar, MDBNavbarBrand, MDBNavbarNav, MDBNavItem, MDBNavLink, MDBNavbarToggler, MDBCollapse, MDBFormInline,MDBDropdown, MDBDropdownToggle, MDBDropdownMenu, MDBDropdownItem} from "mdbreact";import { BrowserRouter as Router } from 'react-router-dom';import {Link} from "react-router-dom";class NavbarPage extends Component {state = { isOpen: false};
toggleCollapse = () => { this.setState({ isOpen: !this.state.isOpen });}
render() { return ( TrendingBaba Home News Videos trends Videos News ); }}
export default NavbarPage;
                      
                      Muralidevx
                      free
                        answered 5 years ago
                    
I am facing the same issue with the latest MDBReact Pro with react-router-dom . Could you please suggest how to resolve it.
TypeError: Cannot read property 'pathname' of undefined
in Navlink.js
Piotr Glejzer staff commented 5 years ago
which version of react-router-dom do you use?
jovana free commented 5 years ago
Yes same issue here. Also on the MDBBtn class.
I have used this versions, what can I do to fix this issue?
"mdbootstrap": "^4.12.0",
"mdbreact": "^4.25.0",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-router-dom": "^5.1.2",
"react-scripts": "3.3.1"
Thanks for helping me out!
Jo
jovana free commented 5 years ago
Okay I read about an update from yesterday: https://mdbootstrap.com/docs/react/changelog/
Using the below config, solved this issues:
"mdbootstrap": "^4.12.0",
"mdbreact": "^4.25.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-router-dom": "^5.1.2",
"react-scripts": "3.3.1"
Good work!!
                      
                      akoleci@aedsrl.it
                      free
                        answered 6 years ago
                    
I have mdbreact pro with small bundle included, where can I find the last version? I have the admin pro template which includes mdbreact-4.18.0.tgz, can I get last update please?
The 4.18.0 still depends on 4.3.1 react-router-dom.
Aliaksandr Andrasiuk staff commented 6 years ago
Hi,
Thank you for the mention the problem. We will fix this in the next release.
You already have the latest version of mdbreact(4.18.0).
You can change the version of the react-router-dom manually in package.json file or using the command npm i react-router-dom@5.0.1 (be sure you are in mdbreact directory). After updating the package you can use the command npm pack and you will get the newest tgz with updated react-router-dom package.
Hope I could help.
Best regards.
                      
                      Philippe Yu
                      free
                        answered 6 years ago
                    
Hi,
I used to have the same problem. The issue comes from react-router-dom version, and I'm actually using v 4.3.1
Install it with these commands:
npm install react-router-dom@4.3.1
Then in index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import '@fortawesome/fontawesome-free/css/all.min.css';
import 'bootstrap-css-only/css/bootstrap.min.css';
import 'mdbreact/dist/css/mdb.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
                    
                      Aliaksandr Andrasiuk staff commented 6 years ago
Hi,
Starting from mdbreact v4.15.0 we updated react-router-dom dependency to v.5.0.1 to fix problems with Router. 
You can upgrade your react-router-dom dependency to v.5.0.1or latest:
npm i react-roter-dom@5.0.1 or npm i react-router-dom@latest
Hope I could help.
Best regards.
                      
                      Travis1282
                      free
                        answered 6 years ago
                    
Neither of these fixes work. Any updates as to the progress?
Aliaksandr Andrasiuk staff commented 6 years ago
Hi,
Which version of mdbreact do you use?
In v4.15.0 we updated dependencies and it should resolve the problem.
                      
                      Aliaksandr Andrasiuk
                      staff
                        answered 6 years ago
                    
Hello,
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>
                <MDBNavItem>
                    <MDBNavLink to="/locales" className="white-text mr-2">
                        Locales
                    </MDBNavLink>
                </MDBNavItem>
                <MDBNavItem>
                    <MDBNavLink to="/softland" className="white-text mr-2">
                        Softland
                    </MDBNavLink>
                </MDBNavItem>
                <MDBNavItem>
                    <MDBNavLink to="/" className="white-text">
                        Salir
                    </MDBNavLink>
                </MDBNavItem>
            </MDBNavbarNav>
And now can try to run your app.
Best regards,
Aliaksandr from MDB.
                      
                      Aliaksandr Andrasiuk
                      staff
                        answered 6 years ago
                    
Hello,
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 free commented 6 years ago
This is the link to the project files :https://we.tl/t-bCO7zpm5QN file is under components/navigation/TopNavigation , regards
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: Macbook pro 2013
 - Browser: chrome
 - OS: macos sierra
 - Provided sample code: No
 - Provided link: No