Problem with MDBNavLink and react-router


Topic: Problem with MDBNavLink and react-router

gllermaly pro asked 3 months 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


Aliaksandr Andrasiuk staff answered 3 months 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 pro commented 3 months ago

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


Aliaksandr Andrasiuk staff answered 3 months 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.


Travis1282 answered 1 months ago

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


Aliaksandr Andrasiuk staff commented 1 months ago

Hi,

Which version of mdbreact do you use?

In v4.15.0 we updated dependencies and it should resolve the problem.


Philippe Yu pro answered 4 weeks 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 4 weeks 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.


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 days 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.


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: React
  • MDB Version: 4.11.1
  • Device: Macbook pro 2013
  • Browser: chrome
  • OS: macos sierra
  • Provided sample code: No
  • Provided link: No