Problem with MDBNavLink and react-router

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.

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.

Neither of these fixes work. Any updates as to the progress?

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();

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.

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

"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"

"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"

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;

Hi @Siva Krishna Vegi,

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