Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

react-router 5.0.0 incompatibility with AppSidebarNav

See original GitHub issue

react-router just released version 5.0.0 (supposedly 4.4.0 but they need to bump the major version due to versioning issue; but it was supposed to be backwards compatible with 4.x)

coreui react is working without problems with react-router 4.3.1. When I upgrade to react-router 5.0.0, I am getting an error whenever I use AppSidebarNav

coreui/coreui version 2.1.8 coreui/react version 2.1.5

Error when using AppSidebarNav

modules.js?hash=64eadce6a41dd5bd128fd48eb8bcb293f3d5a29f:119104 Uncaught Invariant Violation: You should not use <Route> or withRouter() outside a <Router>
    at invariant (http://localhost:3002/packages/modules.js?hash=64eadce6a41dd5bd128fd48eb8bcb293f3d5a29f:119104:15)
    at Route.computeMatch (http://localhost:3002/packages/modules.js?hash=64eadce6a41dd5bd128fd48eb8bcb293f3d5a29f:118231:29)
    at new Route (http://localhost:3002/packages/modules.js?hash=64eadce6a41dd5bd128fd48eb8bcb293f3d5a29f:118206:20)
    at constructClassInstance (http://localhost:3002/packages/modules.js?hash=64eadce6a41dd5bd128fd48eb8bcb293f3d5a29f:19692:18)
    at updateClassComponent (http://localhost:3002/packages/modules.js?hash=64eadce6a41dd5bd128fd48eb8bcb293f3d5a29f:23018:5)
    at beginWork (http://localhost:3002/packages/modules.js?hash=64eadce6a41dd5bd128fd48eb8bcb293f3d5a29f:23975:16)
    at performUnitOfWork (http://localhost:3002/packages/modules.js?hash=64eadce6a41dd5bd128fd48eb8bcb293f3d5a29f:27643:12)
    at workLoop (http://localhost:3002/packages/modules.js?hash=64eadce6a41dd5bd128fd48eb8bcb293f3d5a29f:27683:24)
    at HTMLUnknownElement.callCallback (http://localhost:3002/packages/modules.js?hash=64eadce6a41dd5bd128fd48eb8bcb293f3d5a29f:8526:14)
    at Object.invokeGuardedCallbackDev (http://localhost:3002/packages/modules.js?hash=64eadce6a41dd5bd128fd48eb8bcb293f3d5a29f:8576:16)

The above error occurred in the <Route> component:
    in Route (created by NavLink)
    in NavLink (created by AppSidebarNav)
    in li (created by NavItem)
    in NavItem (created by AppSidebarNav)
    in ul (created by Nav)
    in Nav (created by AppSidebarNav)
    in div (created by ScrollBar)
    in ScrollBar (created by AppSidebarNav)
    in AppSidebarNav (created by SideNav)
    in div (created by AppSidebar)
    in ClickOutComponent (created by AppSidebar)
    in AppSidebar (created by SideNav)

Issue Analytics

State:
Created 4 years ago
Reactions:3
Comments:5 (2 by maintainers)

Top GitHub Comments

1reaction

rj-davidcommented, May 16, 2019

@xidedix thanks for a clear guide. I’ll try it in a few days

1reaction

xidedixcommented, May 17, 2019

@rj-david @dap1995

v2.5.0 has been released. <del>Please read the migration guide before upgrading.</del>

It turns out this is not such a breaking change, as it seemed at a glance. Just update dependencies and you’re good.

@coreui/react to ~2.5.0 react-router-dom to ^5.0.0 react-router-config to ^5.0.0

Top Results From Across the Web

How to Create a Navigation Bar and Sidebar Using React

Go to your browser and click the links on your header to see routing works! Alright, we can actually create the sidebar now....

Upgrading from v5 v6.6.1 - React Router

React Router v6 introduces a new navigation API that is synonymous with <Link> and provides better compatibility with suspense-enabled apps. We include both ......

React Sidebar Navigation Menu using React Router v6.4

Learn how to create a React Sidebar Navigation Menu using React Router v6.4 in this beginner ReactJS Project Tutorial.

React Navigation 5.0 - A new way to navigate

In previous versions of React Navigation, we used to configure the navigator statically using createXNavigator functions and static ...

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

You need import the named export Router as well from react-router-dom and wrap it around your Switch/Route components. const App ...