-
-
Notifications
You must be signed in to change notification settings - Fork 10.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
react-router-config - You should not use <Switch> outside a <Router> (it is inside a Router!) #6679
Comments
I just tried to reproduce this on code sandbox and it works fine. So I'll close the issue. General comment though, is that this new usage of rollup cjs/esm bundles is a fairly large disaster for people trying to use react-router. I'd strongly recommend not using that approach if you want to be developer friendly... :-/ |
I had the same issue. This worked in v4.x but surprisingly broke in v5. My fix was to make sure that I imported everything from |
yeah, in my case it was related to the fact that I have a custom package that replaces Turns out I just had to fully publish my updated package and then it worked (after a couple of hours fighting to update my package to the new weird CJS vs ESM rollup builds). I really wish they'd just keep the old-style es builds without all the rollup overhead, it'd be so much simpler... |
I am getting the same issue was working fine on react router 4 , upgraded and it broke , however i only get this error when i build the app using webpack production mode : ( , |
I was using |
Use and
|
The same issue when using StaticRouter in SSR |
@jovinbm It's good job.
|
Having the same issue in version 5.x when using a |
I had the same issue. I'd caused it myself, but here's an explanation in case someone else runs into the same problem. We'd created a couple routes and published them internally in our package The solution: make the following changes to the
Now, there's only a single routing context, meaning the |
I'm having this exact issue and none of these solutions or workarounds did anything for my situation. My scenario is the same as the one @ryaninvents mentions, but that solution didn't work for me either. I cleaned both Is there any way to check where routing context is being lost?? Components work fine in the library, and router works fine in the app. But if I want to use a component in the library that uses Link, NavLink, or any other router component, from the app, it fails. Context is always lost, and I have no clue what else to do. |
Btw, if someone else stumbles upon this very same strange issue, I got tired of searching for a solution. I downgraded both Don't bother losing time on this, and try again in a few months... or years. |
@alerizzo Then you should stay on version 4.3.1 forever, because the way React Router uses the new context api is the way that React Context works: if you create two different context instances they will never be the same. The only thing we can do is, that we detect the parallel use of two different contexts and give a clearer notification about it. |
@alerizzo are you using If anyone else is using Yarn, has not |
@MeiKatz thanks! I used to have a similar issue with moment.js and with mobx, and I understand why this error happens. Maybe this is "not exactly the same use case" but, those two libraries solved the issue searching for an already created instance and use that instead. (But maybe, as we're talking about React context here... is totally different...) @ryaninvents yep! I'm using But, if that's the case.... how should I suppose to use any react router component inside my company's components library (without using |
@alerizzo I have the same question! To be clear, I'm not affiliated with the React Router project at all... I'm just a developer who has learned a few strange lessons, most of them the hard way. I'm trying to figure out the same workflow myself, and am considering writing a utility once I figure out a workflow that isn't completely horrible. What I've got in my head so far:
This is just a plan; I haven't had the need to test it yet. |
Also having this issue after trying to npm link a package of components with a peer dependency on react-router-dom into another application. Not sure if this is react-router, npm link, or issues with react's new context APIs. The same code works when publishing the component package to a registry an installing it from there. |
Maybe you should upgrade |
Version
5.0.0
Steps to reproduce
Use react-router-config with a static routes map
Expected Behaviour
It should work the same as in version 4.3.0
Actual Behaviour
Uncaught Error: Invariant failed: You should not use <Switch> outside a <Router>
The text was updated successfully, but these errors were encountered: