v4.4.0-beta.1
Pre-releaseThis release fixes a few issues with the build in v4.4.0-beta.0 where the 4.4.0-beta.0
version was not specified correctly in the dependencies of react-router-dom
.
Also, please be careful which build you are using. Prior to this release, you could mix your import
styles, i.e.:
// Be careful, this won't work anymore!
import BrowserRouter from 'react-router-dom/BrowserRouter';
import { Route } from 'react-router-dom';
<BrowserRouter>
<Route />
</BrowserRouter>
The problem here is that, although it may not be obvious the first import
is actually using the CommonJS build while the 2nd import
is (probably, depending on what your bundler is doing) using the ES modules build. Your bundler can probably handle the variation in module formats just fine, but when you go to run your code you'll see a warning like:
You should not render a <Route> outside a <Router>
Basically, what this means is that <Route>
can't find the correct context object because each build has its own context object and the <Router>
component was imported from a different build!
Instead, just import both components using the same method:
// These are both from the same build and use the same context object
// so there won't be a mismatch :)
import { BrowserRouter, Route } from 'react-router-dom';
I'm going to try and figure out a better way to detect if you're using 2 different builds so we can give you a better warning.
Enjoy! 😅