Topic: MDBNavLink causes "You should not use <NavLink> outside a <Router>"

be.careSA free asked 5 years ago

Expected behavior

Hi, I think the last update broke something with MDBNavLink and react-router-dom (version 4.3.1).

Actual behavior

A new error occurs: "You should not use NavLink outside a Router"

Resources (screenshots, code snippets etc.)


            <Route path="/login" component={() => <Login/>} />
            <SecretRoute exact path="/" component={HomePageContainer} />
            <SecretRoute path="/createProtocol/:protocolId?" component={CreateProtocolDraftContainer} />
            <SecretRoute path="/protocolPhase/:protocolId" component={ProtocolPhasesTableContainer} />
            <SecretRoute path="/addProtocolPhase/:protocolId/:step/:protocolPhaseTag?" component={AddProtocolPhaseContainer} />
            <SecretRoute path="/questions/:protocolId/:protocolPhaseTag" component={QuestionsTableContainer} />
            <SecretRoute path="/addQuestion/:protocolId/:protocolPhaseTag/:step/:questionTag?" component={AddQuestionsToProtocolPhaseContainer} />
            <SecretR`enter code here`oute path="/validateProtocol/:protocolId" component={ValidateProtocolContainer} />
            <SecretRoute path="/jsonValidator" component={JsonValidatorContainer} />
            <SecretRoute component={NotFound} />


export const Header: FunctionComponent = () => (
<MDBRow className={"header-row"}>
    <MDBNavbar dark expand="md">
            <strong><MDBNavLink className="text-white" to={"/"}>Protocol Generator 3000</MDBNavLink></strong>
        <MDBNavbarNav right className={"align-items-center"}>
                <MDBNavLink className={"align-self-center"} to="/jsonValidator">Json Validator</MDBNavLink>


Carlos Lopes free commented 5 years ago

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

Annamalai Vignesh free answered 4 years ago

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/">
          <Route path="/login" exact component={Cockpit}></Route>
          <PrivateRoute path="/main" component={Main}></PrivateRoute>


It contains code from this page

Snippet : Regular fixed Navbar

Piotr Glejzer staff commented 4 years ago


thanks for the post, we will re-write MDBNavLink because this is an old component and has ill-considered structure. Sorry about your problem. Have a nice day.

Best regards, Piotr

Manamapps free answered 4 years ago

I still get this error.

Christian Aichner pro answered 5 years ago

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

How to check:

  • Type npm list react-router-dom


  • 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

Aliaksandr Andrasiuk staff commented 4 years ago


Thank you for the help :)

Carlos Lopes free answered 5 years ago

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

Aliaksandr Andrasiuk staff answered 5 years ago


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


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 (
        <Header />
          <Route path='/login' component={() => <Login />} />
          <Route path='/home' component={() => <Home />} />

export default App;


import React from 'react';
import {
} from 'mdbreact';

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

      <MDBNavbarNav right className={'align-items-center'}>
          <MDBNavLink className={'align-self-center'} to='/login'>

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.

Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.18.0
  • Device: Laptop
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No