MDBNavLink causes &quot;You should not use &lt;NavLi

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

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 5 years ago

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

Add comment

Annamalai Vignesh free answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

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 5 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

Add comment

Manamapps free answered 5 years ago

1 0 Best answer

I still get this error.

Add comment

Christian Aichner pro answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

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 5 years ago

Hi,

Thank you for the help :)

Add comment

Carlos Lopes free answered 5 years ago

0 0 Best answer

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

Add comment

Aliaksandr Andrasiuk staff answered 5 years ago

0 0 Best answer

<p>Tried to reproduce the simplified example and didn't get errors:</p>

<pre class="prettyprint"><code>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;
</code></pre>

<p>Header.js:</p>

<pre class="prettyprint"><code>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>
);
</code></pre>

<p>I noticed that you are using <code>ValidateProtocolContainer / AddProtocolPhaseContainer</code> 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 <code>NavLink</code> and didn't imported it inside a Router into <code>App.js</code> file.</p>

<p>Hope I could help. </p>

<p>Best regards.</p>

Please insert min. 20 characters.

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.

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

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

be.careSA

42Support score
4Questions 2Answers 0Snippets