MDBNavLink causes You should not use outside a

I still get this error.

HI,

Tried to reproduce the simplified example and didn't get errors:

App.js:

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { Header } from './Header';

const Login = () => <div>Login</div>;
const Home = () => <div>Home</div>;

const App = () => {
  return (
    <Router>
      <React.Fragment>
        <Header />
        <Switch>
          <Route path='/login' component={() => <Login />} />
          <Route path='/home' component={() => <Home />} />
        </Switch>
      </React.Fragment>
    </Router>
  );
};

export default App;

Header.js:

import React from 'react';
import {
  MDBRow,
  MDBNavbar,
  MDBNavItem,
  MDBNavLink,
  MDBNavbarNav
} from 'mdbreact';

export const Header = () => (
  <MDBRow className={'header-row'}>
    <MDBNavbar expand='md'>
      <MDBNavbarNav>
        <MDBNavItem>
          <MDBNavLink to={'/home'}>Home</MDBNavLink>
        </MDBNavItem>
      </MDBNavbarNav>

      <MDBNavbarNav right className={'align-items-center'}>
        <MDBNavItem>
          <MDBNavLink className={'align-self-center'} to='/login'>
            Login
          </MDBNavLink>
        </MDBNavItem>
      </MDBNavbarNav>
    </MDBNavbar>
  </MDBRow>
);

I noticed that you are using ValidateProtocolContainer / AddProtocolPhaseContainer and other routes which are not imported(i'm not sure because i can't see the full code) into App.js file. Probably you created a NavLink and didn't imported it inside a Router into App.js file.

Hope I could help.

Best regards.

I fixed this error by updating "react-router-dom" to version 5.0.1

Hi @be.careSA! What version of react-router-dom do you currently have?

How to check:

• Type npm list react-router-dom

or

• Check your package.json at "react-router-dom"

As @Carlos Renato Lopes already stated, version 5.0.1 should do the trick.

Best regards, Chris

I am still facing the issue with MDBNavLink free version. If I remove that component from the code. Then it works fine

I am using the latest version of react-router-dom

App.js Using BrwserRouter

  <Router basename="/react-auth-ui/">
  <Switch>
          <Route path="/login" exact component={Cockpit}></Route>
          <PrivateRoute path="/main" component={Main}></PrivateRoute>
   </Switch>
  </Router>

Main.js

It contains code from this page https://mdbootstrap.com/docs/react/navigation/compositions/

Snippet : Regular fixed Navbar