Skip to content

Commit

Permalink
Documentation update for switch to connected-react-router
Browse files Browse the repository at this point in the history
  • Loading branch information
julienben committed Oct 10, 2018
1 parent 1a65b11 commit 4499a33
Show file tree
Hide file tree
Showing 3 changed files with 20 additions and 9 deletions.
4 changes: 2 additions & 2 deletions docs/general/README.md
Expand Up @@ -65,11 +65,11 @@ visible page for the best performance.
## Industry-standard routing

It's natural to want to add pages (e.g. `/about`) to your application, and
routing makes this possible. Thanks to [react-router] with [react-router-redux],
routing makes this possible. Thanks to [react-router] with [connected-react-router],
that's as easy as pie and the url is auto-synced to your application state!

[react-router]: https://github.com/reactjs/react-router
[react-router-redux]: https://github.com/reactjs/react-router-redux
[connected-react-router]: https://github.com/supasate/connected-react-router

## Static code analysis

Expand Down
2 changes: 1 addition & 1 deletion docs/js/README.md
Expand Up @@ -8,7 +8,7 @@ via [`reselect`](reselect.md).

For managing asynchronous flows (e.g. logging in) we use [`redux-saga`](redux-saga.md).

For routing, we use [`react-router` in combination with `react-router-redux`](routing.md).
For routing, we use [`react-router` in combination with `connected-react-router`](routing.md).

We include a generator for components, containers, sagas, routes and selectors.
Run `npm run generate` to choose from the available generators, and automatically
Expand Down
23 changes: 17 additions & 6 deletions docs/js/routing.md
@@ -1,11 +1,11 @@
# Routing via `react-router` and `react-router-redux`
# Routing via `react-router` and `connected-react-router`

`react-router` is the de-facto standard routing solution for react applications.
The thing is that with redux and a single state tree, the URL is part of that
state. `react-router-redux` takes care of synchronizing the location of our
state. `connected-react-router` takes care of synchronizing the location of our
application with the application state.

(See the [`react-router-redux` documentation](https://github.com/ReactTraining/react-router/tree/master/packages/react-router-redux)
(See the [`connected-react-router` FAQ](https://github.com/supasate/connected-react-router/blob/master/FAQ.md)
for more information)

## Usage
Expand All @@ -20,12 +20,23 @@ Top level routes are located in `App.js`.

If you want your route component (or any component for that matter) to be loaded asynchronously, use container or component generator with 'Do you want an async loader?' option activated.

To go to a new page use the `push` function by `react-router-redux`:
To go to a new page use the `push` function by `connected-react-router`:

```JS
import { push } from 'react-router-redux';
import { push } from 'connected-react-router/immutable';

dispatch(push('/some/page'));
dispatch(push('/path/to/somewhere'));
```

You can do the same thing in a saga:

```JS
import { push } from 'connected-react-router/immutable'
import { put } from 'redux-saga/effects'

export function* mySaga() {
yield put(push('/home'))
}
```

## Child Routes
Expand Down

0 comments on commit 4499a33

Please sign in to comment.