Skip to content

Commit

Permalink
Update README to use react-router v4 beta
Browse files Browse the repository at this point in the history
  • Loading branch information
supasate committed Jan 30, 2017
1 parent a7a2ecc commit 1ba1400
Showing 1 changed file with 14 additions and 6 deletions.
20 changes: 14 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,10 @@ Main features

:clock9: Support time traveling in Redux DevTools.

> Note:
> - `[email protected]` supports new `[email protected]` (with `<Route>` and `<Switch>`)
> - For old `[email protected]` (with `<Match>` and `<Miss>`), you need `[email protected]`
Installation
-----------
Using [npm](https://www.npmjs.com/):
Expand Down Expand Up @@ -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>,
Expand Down Expand Up @@ -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>
)
Expand Down

0 comments on commit 1ba1400

Please sign in to comment.