Topic: Problem with MDBNavLink and react-router

gllermaly free asked 5 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 4 years ago


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


Siva Krishna Vegi free answered 4 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 4 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 4 years ago

which version of react-router-dom do you use?


jovana free commented 4 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 4 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 5 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 5 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 5 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 5 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 5 years ago


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


Aliaksandr Andrasiuk staff commented 5 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 5 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 5 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 5 years ago

This is the link to the project files :https://we.tl/t-bCO7zpm5QN file is under components/navigation/TopNavigation , regards



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • 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
Tags