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

be.careSA free asked 3 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.)

App.tsx:

<Router>
    <React.Fragment>
        <Header/>
        <Switch>
            <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} />
        </Switch>
    </React.Fragment>
</Router>

Header.tsx:

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

);


Carlos Lopes free commented 3 years ago

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


Annamalai Vignesh free answered 3 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/">
  <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


Piotr Glejzer staff commented 3 years ago

Hi,

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 premium answered 3 years ago


I still get this error.


Christian Aichner pro answered 3 years ago


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


Aliaksandr Andrasiuk staff commented 3 years ago

Hi,

Thank you for the help :)


Carlos Lopes free answered 3 years ago


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


Aliaksandr Andrasiuk staff answered 3 years ago


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.



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

  • User: 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