connected-react-router - npm Package Compare versions

Comparing version 6.2.0-beta.1 to 6.2.0-beta.2

package.json

		{
		"name": "connected-react-router",
		"version": "6.2.0-beta.1",
		"version": "6.2.0-beta.2",
		"description": "A Redux binding for React Router v4",
		@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

		@@ -32,7 +32,6 @@ > Breaking change in v5.0.0! Please read [How to migrate from v4 to v5](https://github.com/supasate/connected-react-router/blob/master/FAQ.md#how-to-migrate-from-v4-to-v5).

		Using [npm](https://www.npmjs.com/):

		$ npm install --save connected-react-router

		Or [yarn](https://yarnpkg.com/):
		Or

		@@ -44,9 +43,7 @@ $ yarn add connected-react-router
		### Step 1

		- Create a `history` object.
		- Create a root reducer as a function that takes `history` as an argument and returns reducer.
		- Add `router` reducer into root reducer by passing `history` to `connectRouter`. Note: The key MUST be `router`.
		- Use `routerMiddleware(history)` if you want to dispatch history actions (e.g. to change URL with `push('/path/to/somewhere')`).


		In your root reducer file,
		- Create a function that takes `history` as an argument and returns a root reducer.
		- Add `router` reducer into root reducer by passing `history` to `connectRouter`.
		- Note: The key MUST be `router`.

		```js
		@@ -61,3 +58,12 @@ // reducers.js
		})
		```

		### Step 2
		When creating a Redux store,
		- Create a `history` object.
		- Provide the created `history` to the root reducer creator.
		- Use `routerMiddleware(history)` if you want to dispatch history actions (e.g. to change URL with `push('/path/to/somewhere')`).


		```js
		// configureStore.js
		@@ -70,19 +76,22 @@ ...
		...
		const history = createBrowserHistory()
		export const history = createBrowserHistory()

		const store = createStore(
		createRootReducer(history), // root reducer with router state
		initialState,
		compose(
		applyMiddleware(
		routerMiddleware(history), // for dispatching history actions
		// ... other middlewares ...
		export default function configureStore(preloadedState) {
		const store = createStore(
		createRootReducer(history), // root reducer with router state
		preloadedState,
		compose(
		applyMiddleware(
		routerMiddleware(history), // for dispatching history actions
		// ... other middlewares ...
		),
		),
		),
		)
		)

		return store
		}
		```

		### Step 2
		### Step 3


		- Wrap your react-router v4 routing with `ConnectedRouter` and pass the `history` object as a prop.
		@@ -92,2 +101,3 @@ - Place `ConnectedRouter` as a child of `react-redux`'s `Provider`.
		```js
		// index.js
		...
		@@ -97,7 +107,10 @@ import { Provider } from 'react-redux'
		import { ConnectedRouter } from 'connected-react-router'
		import configureStore, { history } from './configureStore'
		...
		const store = configureStore(/* provide initial state if any */)

		ReactDOM.render(
		<Provider store={store}>
		<ConnectedRouter history={history}> { /* place ConnectedRouter under Provider */ }
		<div> { /* your usual react-router v4 routing */ }
		<> { /* your usual react-router v4 routing */ }
		<Switch>
		@@ -107,3 +120,3 @@ <Route exact path="/" render={() => (<div>Match</div>)} />
		</Switch>
		</div>
		</>
		</ConnectedRouter>
		@@ -114,2 +127,4 @@ </Provider>,
		```
		Note: the `history` object provided to `router` reducer, `routerMiddleware`, and `ConnectedRouter` component must be the same `history` object.

		Now, it's ready to work!
		@@ -116,0 +131,0 @@

connected-react-router - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics