I'm creating a library which includes dependency of react-router-dom. There are some ponents in which I'm using react-router-dom NavLink, for example, let's name it Header -

Header.tsx

export const Header = () => (
  <div>
    <NavLink to="/home">Home</NavLink>
  </div>
);

Bear in mind that this is just an example, to understand how I'm using the react-router-dom elements. So after building and publishing this library, I want to use it in my main react project, where I include this Header ponent and I have a parent BrowserRouter wrapper, so it looks something like this -

App.tsx

export const App = () => (
  <BrowserRouter>
    <Header />
  </BrowserRouter>
);

But instead of rendering the page, it gives the following error:

Invariant failed: You should not use <NavLink> outside a <Router>

Any ideas what could be wrong and how to resolve this? React version is 16 in the parent project and v17 in the library. Router versions are 5.3.0 in both projects.

Could it be caused by the different react versions?

I'm creating a library which includes dependency of react-router-dom. There are some ponents in which I'm using react-router-dom NavLink, for example, let's name it Header -

Header.tsx

export const Header = () => (
  <div>
    <NavLink to="/home">Home</NavLink>
  </div>
);

Bear in mind that this is just an example, to understand how I'm using the react-router-dom elements. So after building and publishing this library, I want to use it in my main react project, where I include this Header ponent and I have a parent BrowserRouter wrapper, so it looks something like this -

App.tsx

export const App = () => (
  <BrowserRouter>
    <Header />
  </BrowserRouter>
);

But instead of rendering the page, it gives the following error:

Invariant failed: You should not use <NavLink> outside a <Router>

Any ideas what could be wrong and how to resolve this? React version is 16 in the parent project and v17 in the library. Router versions are 5.3.0 in both projects.

Could it be caused by the different react versions?

• javascript
• reactjs
• react-router
• react-router-dom

• I know there can be problems when trying to access useLocation when the Switch and the BrowserRouter are both in the App ponent and the way to solve it is to put the BrowserRouter in the index.js. Maybe this weird problem would suggest that the same fix could work for you. Try putting BrowserRouter in the index.js. – srWebDev Commented Sep 6, 2021 at 10:26
• Hmm, that unfortunately didn't help :( – Vdas Dorls Commented Sep 7, 2021 at 10:34
• Can you try the answers to this question? Not sure what's the problem, but just to try solutions: stackoverflow./questions/55552147/… – Iván Commented Sep 8, 2021 at 13:55
• can you post the code along with the import statements? – Sachin Ananthakumar Commented Sep 13, 2021 at 5:05
• You say you're using a different version of React in your library? Importing two versions of React will usually break your code. In your library are react and react-router-dom dependencies or peerDependencies? – sallf Commented Sep 13, 2021 at 23:08

8 Answers 8

There is no clear information or evidence on why is your code breaking based on the information you have given.

With React-router-dom, you must put all your NavLink, Switch, Route, Link tags inside your main <BrowserRouter> </BrowserRouter> tag.

But the example you have shown in the question works without any issue

Header.js

import React from "react"
import {NavLink} from "react-router-dom"

const Header = () => {

   return(
       <div>
        <NavLink to="home"> Take Me Home </NavLink>
       </div>
)
}
export default Header

here is App.js

    import React from "react"
    import Header from "./Header"
    import {BrowserRouter as Router, NavLink} from "react-router-dom"
   // importing BrowserRouter as a Router is not required, it's just standard practice
    
    cosnt App = () => {
       <div>
          <Router>
            <h1> Hello </h1>
            <NavLink to="about"> About </NavLink>
            <Header />
          </Router>
       </div>
    }
    export default App

This code above works without any hassle, Although your code should work, as it's not working, you should first check again for any misplacement of imports, typo

if still doesn't work you should look into React version conflicts, it's always advised to use the latest version in your parent project.

The error indicates that the Header ponent isn't wrapped by Router ponent.

You haven't shared the BrowserRouter code, but make sure that BrowserRouter starts with <Router> and ends with </Router>.

It might have problems in BrowserRouter.

BrowserRouter should start with <Router> and end with </Router>. Then you should correctly import Header ponent.

You can also use Router as well.

import React from "react"
import { NavLink } from "react-router-dom"

export const Header: React.FC = () => {
   return(
       <>
        <NavLink to="home"> Take Me Home </NavLink>
       </>
   )
};

import React from 'react';
import { Router } from 'react-router-dom';
import { createBrowserHistory } from 'history';

export const history = createBrowserHistory();

export const App: React.FC = () => {
  return (
      <Router history={history}>
        <Header />
        <Routes /> // Your all routes
      </Router>
  );
};

history will help you out used anywhere to push the router. In your ponents and utils.

history.push('/about');

history.push({
  pathname: '/somewhere',
  search: '?some=search-string',
  hash: '#howdy',
  state: {
    [userDefined]: true
  }
});

I would suggest you double check your imports. Maybe your importing the wrong Header ponent Or your not importing BrowserRouter correctly as mentioned in the example above

Yes, just use <Router></Route> <Navlink> it is just when u want to redirect or just go to the URL

I also had a same problem, This is how I solved it. In my case, I was using "rollup" to create the react library, To solve this all I have to do was just provide libraries "react-router-dom", as external dependency,

i mean in rollup.config.js file just update the external tag with below value

export default {
    entry: 'src/index.js',
    dest: 'bundle.js',
    format: 'cjs',
    external: [  "react-router-dom"]
};

https://rollupjs/troubleshooting/#warning-treating-module-as-external-dependency (bit of documentation on external dependency in rollup)

Whichever tool you are using to generate your library, check in the config file is there an option to provide external dependency and update it value and it should work

FYI using

"react": "18.2.0",
"react-router-dom": "^6.6.1",

I also had this issue while creating a lib that is used by another project.

Important to mention that, in my case:

1. As the lib is internally developed, the lib is used via a symlink, published on my machine via npm link, not at npmjs. via npm publish.
2. I use Vite for building.

In this case, the solution was based on the answer from @mehdi-dehghani at Invariant failed: You should not use <Route> outside a <Router> to fix for who uses Webpack.

The problem was because react-router-dom was loaded more than once by the bundler (Vite in my case), once from the lib project and again from the main project.

The solution is to avoid the multiple load of the same dependency (react-router-dom in this case). In Vite this can be achieved using the resolve-dedupe option at vite.config.ts

See below an example code I used to debug and find the solution:

Header.tsx (at lib project):

import { NavLink } from "react-router-dom";

export const Header = () => (
  <div>
    <NavLink to="/home">Home</NavLink>
  </div>
);

export default Header;

App.tsx (at main project)

import { BrowserRouter, Routes, Route } from "react-router-dom";
import { Header } from "@blockium/router-lib";
    
export const App = () => (
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<Header />}></Route>
      <Route path="/home" element={<div>It worked!</div>}></Route>
    </Routes>
  </BrowserRouter>
);

export default App;

vite.config.ts (at main project)

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],

  resolve: {
    dedupe: ["react", "react-dom", "react-router-dom"],
  },
});