Merge pull request #28 from supasate/support-react-router-v4-beta

Support react-router@4.0.0-beta

README.md

@@ -16,6 +16,10 @@ Main features
 
 :clock9: Support time traveling in Redux DevTools.
 
+> Note:
+> - `connected-react-router@4.0.0-beta` supports new `react-router@4.0.0-beta` (with `<Route>` and `<Switch>`)
+> - For old `react-router@4.0.0-alpha` (with `<Match>` and `<Miss>`), you need `connected-react-router@2.0.0-alpha.5`
+
 Installation
 -----------
 Using [npm](https://www.npmjs.com/):
@@ -64,15 +68,17 @@ const store = createStore(
 ```js
 ...
 import { Provider } from 'react-redux'
-import { Match, Miss } from 'react-router' // react-router v4
+import { Route, Switch } from 'react-router' // react-router v4
 import { ConnectedRouter } from 'connected-react-router'
 ...
 ReactDOM.render(
   <Provider store={store}>
     <ConnectedRouter history={history}> { /* place ConnectedRouter under Provider */ }
       <div> { /* your usual react-router v4 routing */ }
-        <Match exactly pattern="/" render={() => (<div>Match</div>)} />
-        <Miss render={() => (<div>Miss</div>)} />
+        <Switch>
+          <Route exact path="/" render={() => (<div>Match</div>)} />
+          <Route render={() => (<div>Miss</div>)} />
+        </Switch>
       </div>
     </ConnectedRouter>
   </Provider>,
@@ -150,14 +156,16 @@ export default connect(mapStateToProps)(Child)
 `App.js`
 ``` js
 import React from 'react'
-import { Match, Miss } from 'react-router' /* react-router v4 */
+import { Route, Switch } from 'react-router' /* react-router v4 */
 import { ConnectedRouter } from 'connected-react-router'
 
 const App = ({ history }) => ( /* receive history object via props */
   <ConnectedRouter history={history}>
     <div>
-      <Match exactly pattern="/" render={() => (<div>Match</div>)} />
-      <Miss render={() => (<div>Miss</div>)} />
+      <Switch>
+        <Route exact path="/" render={() => (<div>Match</div>)} />
+        <Route render={() => (<div>Miss</div>)} />
+      </Switch>
     </div>
   </ConnectedRouter>
 )

examples/package.json

@@ -28,7 +28,7 @@
     "react": "^15.4.1",
     "react-dom": "^15.4.1",
     "react-redux": "^4.4.6",
-    "react-router": "^4.0.0-alpha.6",
+    "react-router": "^4.0.0-beta.2",
     "redux": "^3.6.0"
   }
 }

examples/src/components/NavBar.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Link } from 'react-router'
+import { Link } from 'react-router-dom'
 
 const NavBar = () => (
   <div>

examples/src/routes/index.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Match, Miss } from 'react-router'
+import { Route, Switch } from 'react-router'
 import Home from '../components/Home'
 import Hello from '../components/Hello'
 import Counter from '../components/Counter'
@@ -9,10 +9,12 @@ import NavBar from '../components/NavBar'
 const routes = (
   <div>
     <NavBar />
-    <Match exactly pattern="/" component={Home} />
-    <Match pattern="/hello" component={Hello} />
-    <Match pattern="/counter" component={Counter} />
-    <Miss component={NoMatch} />
+    <Switch>
+      <Route exact path="/" component={Home} />
+      <Route path="/hello" component={Hello} />
+      <Route path="/counter" component={Counter} />
+      <Route component={NoMatch} />
+    </Switch>
   </div>
 )