React Router issue within library - using elements outside <Router>

Question

I'm creating a library which includes dependency of react-router-dom. There are some components 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 component 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?

Answer 1

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.

Answer 2

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

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

Answer 3

It might have problems in BrowserRouter.

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