React Router issue within library - using elements outside

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.

Answer 4

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

Answer 5

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 components and utils.

history.push('/about');

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

Answer 6

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

Answer 7

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.org/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",