Node's Pretty Magical

    @postmates/connected-react-router
    TypeScript icon, indicating that this package has built-in type declarations

    4.3.0-patch.2 • Public • Published

    Connected React Router Build Status Open Source Helpers

    A Redux binding for React Router v4

    Main features

    Synchronize router state with redux store with uni-directional flow (history -> store -> router -> components).

    🎁 Support React Router v4.

    ☀️ Support functional component hot reloading while preserving state (with react-hot-reload).

    🎉 Dispatching history methods (push, replace, go, goBack, goForward) work for both redux-thunk and redux-saga.

    Nested children can access routing state such as current location directly with react-redux's connect.

    🕘 Support time traveling in Redux DevTools.

    💎 Support Immutable.js

    💪 Support TypeScript

    Installation

    Using npm:

    $ npm install --save connected-react-router
    

    Or yarn:

    $ yarn add connected-react-router
    

    Usage

    Step 1

    • Create a history object.
    • Wrap the root reducer with connectRouter and supply the history object to get a new root reducer.
    • Use routerMiddleware(history) if you want to dispatch history actions (ex. to change URL with push('/path/to/somewhere')).
    ...
    import { createBrowserHistory } from 'history'
    import { applyMiddleware, compose, createStore } from 'redux'
    import { connectRouter, routerMiddleware } from 'connected-react-router'
    ...
    const history = createBrowserHistory()
    
    const store = createStore(
      connectRouter(history)(rootReducer), // new root reducer with router state
      initialState,
      compose(
        applyMiddleware(
          routerMiddleware(history), // for dispatching history actions
          // ... other middlewares ...
        ),
      ),
    )

    Step 2

    • Wrap your react-router v4 routing with ConnectedRouter and pass history object as a prop.
    • Place ConnectedRouter as children of react-redux's Provider.
    ...
    import { Provider } from 'react-redux'
    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 */ }
            <Switch>
              <Route exact path="/" render={() => (<div>Match</div>)} />
              <Route render={() => (<div>Miss</div>)} />
            </Switch>
          </div>
        </ConnectedRouter>
      </Provider>,
      document.getElementById('react-root')
    )

    Now, it's ready to work!

    Examples

    See examples folder

    FAQ

    Build

    npm run build

    Generated files will be in lib folder.

    Contributors

    See Contributors and Acknowledge.

    License

    MIT License

    Keywords

    none

    Install

    npm i @postmates/connected-react-router

    DownloadsWeekly Downloads

    1

    Version

    4.3.0-patch.2

    License

    MIT

    Unpacked Size

    585 kB

    Total Files

    24

    Last publish

    Collaborators

    • mager
    • postmates-frontend
    • apapirovski
    • mnowik
    • postmates-fleet
    • cvanderschuere