NavLink used in module causes Invariant Violation: You should not use <Route> or withRouter() outside a <Router>

[zhangriyueming]

Version

5.0.0

Test Case

Steps to reproduce

1. Create a new module, like 'testcase-sidebar', and add a dependency 'react-router-dom'.
2. Implement simple sidebar component <Sidebar> with list of <NavLink>.
3. Create a new project, and install 'testcase-sidebar'.
4. Put <Router> at root level. And put some <Route> to different controllers.
5. Let a controller loads <Sidebar>
6. It will cause Invariant Violation: You should not use <Route> or withRouter() outside a <Router>

Expected Behavior

Works without errors.

If move the <Sidebar> component to the project itself, it will works fine. But if put <Sidebar> component to a module, it causes the error.

Actual Behavior

Invariant Violation: You should not use <Route> or withRouter() outside a <Router>

[timdorr]

You have to be using the exact same instance of React Router because of how the new Context API works behind the scenes. This is actually indicative that you are including two copies of React Router too. Depending on your build tooling, you should mark React Router as external and export it to that sidebar library.

[zhangriyueming]

Depending on your build tooling, you should mark React Router as external and export it to that sidebar library.

@timdorr - Can you show how to do that? with webpack.

[zhangriyueming]

For someone would fell into the same trap.

I did this for now to get worked:

Pass the 'NavLink' from the project to the <Sidebar> component in library. And remove 'react-router-dom' dependency from the library. Then replace the <NavLink> in library to something like <props.linkRenderer> I'm not sure is it the best way, But it works.

[StringEpsilon]

@zhangriyueming Check your webpack / rollup / whatever config. If you use webpack, this gist of mine might help:

https://gist.github.com/StringEpsilon/88c7b049c891425232aaf88e7c882e05

[Richacinas]

This might be of help too:

#6769 (comment)

[SampsonCrowley]

For Library Authors use externals if you are using webpack