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:closed
  • Created 4 years ago
  • Reactions:3
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

rj-davidcommented, May 16, 2019

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

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

Read more comments on GitHub >

github_iconTop 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....
Read more >
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 ......
Read more >
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.
Read more >
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 ...
Read more >
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 ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found