Problem with MDBNavLink and react-router


Topic: Problem with MDBNavLink and react-router

gllermaly pro asked a week 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


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 a week ago

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


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.


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