Support React Router v6

supasate · Nov 25, 2018 · 86e3d83 · 86e3d83
1 parent b197430
commit 86e3d83
Show file tree

Hide file tree

Showing 9 changed files with 474 additions and 531 deletions.
diff --git a/FAQ.md b/FAQ.md
@@ -7,6 +7,7 @@
 - [How to hot reload reducers](#how-to-hot-reload-reducers)
 - [How to support Immutable.js](#how-to-support-immutablejs)
 - [How to migrate from v4 to v5](#how-to-migrate-from-v4-to-v5)
+- [How to use your own context with react-redux](#how-to-use-your-own-context-with-react-redux)
 
 ### How to navigate with Redux action
 #### with store.dispatch
@@ -307,3 +308,17 @@ It's easy to migrate from v4 to v5.
 + const nextCreateRootReducer = require('./reducers').default
 + store.replaceReducer(nextCreateRootReducer(history))
 ```
+
+### How to Use Your Own Context with react-redux
+With react-redux v6.0.0, you can pass your own context to `<Provider>` component. So, you need to pass the same context as props to `<ConnectedRouter>` component.
+```js
+const customContext = React.createContext(null) // your own context
+
+ReactDOM.render(
+  <Provider store={store} context={customContext}>
+    <ConnectedRouter history={history} context={customContext}>
+      ...
+    </ConnectedRouter>
+  </Provider>
+)
+```
diff --git a/examples/basic/package.json b/examples/basic/package.json
@@ -23,12 +23,12 @@
     "webpack-hot-middleware": "^2.24.3"
   },
   "dependencies": {
-    "connected-react-router": "^5.0.0",
+    "connected-react-router": "^6.0.0-beta.1",
     "history": "^4.7.2",
     "prop-types": "^15.6.2",
     "react": "^16.6.0",
     "react-dom": "^16.6.0",
-    "react-redux": "^5.1.0",
+    "react-redux": "6.0.0-beta.2",
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
     "redux": "^4.0.1"

diff --git a/examples/basic/yarn.lock b/examples/basic/yarn.lock
@@ -1529,10 +1529,10 @@ concat-stream@^1.5.0:
     readable-stream "^2.2.2"
     typedarray "^0.0.6"
 
-connected-react-router@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/connected-react-router/-/connected-react-router-5.0.0.tgz#46f19063c629a0e8c44cedaf7cac0c8fedadb613"
-  integrity sha512-E8/WIx0VIxivsQsrlVr/eOwKW22pTBBclDtTQvoc2zEI+0dj3NnX7U/JffWedO+7N6QKERMJIPhbnGbpLSfhag==
+connected-react-router@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/connected-react-router/-/connected-react-router-5.0.1.tgz#8379854fad7e027b1e27652c00ad534f8ad244b3"
+  integrity sha512-0QwWYPRGZQ7f284lmqc5kwC4T3iW3zrAH3zzi6uUMzTOxbA+mn38tAgMOoVo9m3pbskvONFtXiajgVkCElE9EQ==
   dependencies:
     immutable "^3.8.1"
     seamless-immutable "^7.1.3"
@@ -2397,7 +2397,7 @@ hoist-non-react-statics@^2.5.0:
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
   integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==
 
-hoist-non-react-statics@^3.0.0:
+hoist-non-react-statics@^3.0.1:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.1.0.tgz#42414ccdfff019cd2168168be998c7b3bd5245c0"
   integrity sha512-MYcYuROh7SBM69xHGqXEwQqDux34s9tz+sCnxJmN18kgWh6JFdTw/5YdZtqsOdZJXddE/wUpCzfEdDrJj8p0Iw==
@@ -3756,23 +3756,22 @@ react-is@^16.3.2, react-is@^16.6.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.6.0.tgz#456645144581a6e99f6816ae2bd24ee94bdd0c01"
   integrity sha512-q8U7k0Fi7oxF1HvQgyBjPwDXeMplEsArnKt2iYhuIF86+GBbgLHdAmokL3XUFjTd7Q363OSNG55FOGUdONVn1g==
 
-react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.4:
+react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
-react-redux@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.1.0.tgz#948b1e2686473d1999092bcfb32d0dc43d33f667"
-  integrity sha512-CRMpEx8+ccpoVxQrQDkG1obExNYpj6dZ1Ni7lUNFB9wcxOhy02tIqpFo4IUXc0kYvCGMu6ABj9A4imEX2VGZJQ==
+react-redux@6.0.0-beta.2:
+  version "6.0.0-beta.2"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-6.0.0-beta.2.tgz#90b8d50ae71d9dc5d413200836d279de64f7c3e2"
+  integrity sha512-B4CADCEReHgnJzRLGp4sadIhOpRZymxEW9LZ0vcoK02DeyRnQwYY3MI1IvZ6nNhphYMfDD311dpy571lI5HbHQ==
   dependencies:
     "@babel/runtime" "^7.1.2"
-    hoist-non-react-statics "^3.0.0"
+    hoist-non-react-statics "^3.0.1"
     invariant "^2.2.4"
     loose-envify "^1.1.0"
-    prop-types "^15.6.1"
+    prop-types "^15.6.2"
     react-is "^16.6.0"
-    react-lifecycles-compat "^3.0.0"
 
 react-router-dom@^4.3.1:
   version "4.3.1"

diff --git a/examples/immutable/package.json b/examples/immutable/package.json
@@ -22,13 +22,13 @@
     "webpack-hot-middleware": "^2.24.3"
   },
   "dependencies": {
-    "connected-react-router": "^5.0.0",
+    "connected-react-router": "^6.0.0-beta.1",
     "history": "^4.7.2",
     "immutable": "^4.0.0-rc.12",
     "prop-types": "^15.6.2",
     "react": "^16.6.0",
     "react-dom": "^16.6.0",
-    "react-redux": "^5.1.0",
+    "react-redux": "6.0.0-beta.2",
     "react-router": "^4.3.1",
     "react-router-dom": "^4.3.1",
     "redux": "^4.0.1",

diff --git a/examples/typescript/package.json b/examples/typescript/package.json
@@ -26,7 +26,7 @@
     "webpack-dev-server": "^3.1.10"
   },
   "dependencies": {
-    "connected-react-router": "^5.0.0",
+    "connected-react-router": "^6.0.0-beta.1",
     "history": "^4.7.2",
     "react": "^16.6.0",
     "react-dom": "^16.6.0",

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "connected-react-router",
-  "version": "5.0.1",
+  "version": "6.0.0-beta.1",
   "description": "A Redux binding for React Router v4",
   "main": "lib/index.js",
   "types": "./index.d.ts",
@@ -30,7 +30,7 @@
   "peerDependencies": {
     "history": "^4.7.2",
     "react": "^15.5.4 || ^16.0.0",
-    "react-redux": "^4.4.8 || ^5.0.7",
+    "react-redux": "^6.0.0-beta.2",
     "react-router": "^4.3.1",
     "redux": "^3.6.0 || ^4.0.0"
   },
@@ -58,7 +58,7 @@
     "raf": "^3.4.0",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
-    "react-redux": "^5.0.7",
+    "react-redux": "^6.0.0-beta.2",
     "react-router": "^4.3.1",
     "react-test-renderer": "^16.0.0",
     "redux": "^4.0.0",

diff --git a/src/ConnectedRouter.js b/src/ConnectedRouter.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import { connect } from 'react-redux'
+import { connect, ReactReduxContext } from 'react-redux'
 import { Router } from 'react-router'
 import { onLocationChanged } from './actions'
 
@@ -14,19 +14,19 @@ const createConnectedRouter = (structure) => {
    */
 
   class ConnectedRouter extends Component {
-    constructor(props, context) {
+    constructor(props) {
       super(props)
 
       this.inTimeTravelling = false
 
       // Subscribe to store changes
-      this.unsubscribe = context.store.subscribe(() => {
+      this.unsubscribe = props.store.subscribe(() => {
         // Extract store's location
         const {
           pathname: pathnameInStore,
           search: searchInStore,
           hash: hashInStore,
-        } = toJS(getIn(context.store.getState(), ['router', 'location']))
+        } = toJS(getIn(props.store.getState(), ['router', 'location']))
         // Extract history's location
         const {
           pathname: pathnameInHistory,
@@ -77,14 +77,11 @@ const createConnectedRouter = (structure) => {
     }
   }
 
-  ConnectedRouter.contextTypes = {
+  ConnectedRouter.propTypes = {
     store: PropTypes.shape({
       getState: PropTypes.func.isRequired,
       subscribe: PropTypes.func.isRequired,
     }).isRequired,
-  }
-
-  ConnectedRouter.propTypes = {
     history: PropTypes.shape({
       action: PropTypes.string.isRequired,
       listen: PropTypes.func.isRequired,
@@ -110,7 +107,25 @@ const createConnectedRouter = (structure) => {
     onLocationChanged: (location, action) => dispatch(onLocationChanged(location, action))
   })
 
-  return connect(mapStateToProps, mapDispatchToProps)(ConnectedRouter)
+  const ConnectedRouterWithContext = props => {
+    const Context = props.context || ReactReduxContext
+
+    if (Context == null) {
+      throw 'Please upgrade to react-redux v6'
+    }
+
+    return (
+      <Context.Consumer>
+        {({ store }) => <ConnectedRouter store={store} {...props} />}
+      </Context.Consumer>
+    )
+  }
+
+  ConnectedRouterWithContext.propTypes = {
+    context: PropTypes.object,
+  }
+
+  return connect(mapStateToProps, mapDispatchToProps)(ConnectedRouterWithContext)
 }
 
 export default createConnectedRouter