### Install Project Dependencies (Yarn)

Source: https://github.com/supasate/connected-react-router/blob/master/examples/basic/README.md

Installs all required project dependencies using Yarn. This command prepares the development environment for the Connected React Router example.

```bash
yarn
```

--------------------------------

### Install Project Dependencies with Yarn

Source: https://github.com/supasate/connected-react-router/blob/master/examples/immutable/README.md

Installs all required project dependencies using the Yarn package manager. This command should be run once after cloning the repository to set up the development environment.

```bash
yarn
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/supasate/connected-react-router/blob/master/examples/typescript/README.md

Installs the necessary project dependencies using Yarn.

```bash
yarn
```

--------------------------------

### Run Development Server (NPM)

Source: https://github.com/supasate/connected-react-router/blob/master/examples/basic/README.md

Starts the local development server for the Connected React Router example. This command enables hot module replacement, allowing component changes to be applied while preserving application state.

```bash
npm run dev
```

--------------------------------

### Run Development Server with NPM

Source: https://github.com/supasate/connected-react-router/blob/master/examples/immutable/README.md

Starts the local development server for the project using npm. This command compiles the application and makes it accessible in your web browser, enabling live development and testing.

```bash
npm run dev
```

--------------------------------

### Run Development Server

Source: https://github.com/supasate/connected-react-router/blob/master/examples/typescript/README.md

Starts the development server for the project, allowing you to test changes and observe component behavior.

```bash
npm run dev
```

--------------------------------

### Install Connected React Router

Source: https://github.com/supasate/connected-react-router/blob/master/README.md

Instructions for installing the `connected-react-router` package using npm or yarn. This library requires React 16.4 and React Redux 6.0 or later.

```Bash
npm install --save connected-react-router
```

```Bash
yarn add connected-react-router
```

--------------------------------

### Configure Redux Store with Connected React Router Middleware

Source: https://github.com/supasate/connected-react-router/blob/master/README.md

Shows how to create a Redux store, initialize a `history` object, and apply `routerMiddleware` for dispatching history actions. This setup enables URL changes via Redux actions and integrates router state with the store.

```JavaScript
// configureStore.js
...
import { createBrowserHistory } from 'history'
import { applyMiddleware, compose, createStore } from 'redux'
import { routerMiddleware } from 'connected-react-router'
import createRootReducer from './reducers'
...
export const history = createBrowserHistory()

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
}
```

--------------------------------

### Define Main React App Component for Hot Reloading

Source: https://github.com/supasate/connected-react-router/blob/master/FAQ.md

This snippet shows how to define the main `App` functional component, receiving the `history` object as props, and wrapping its routes with `ConnectedRouter` from `connected-react-router` for React Router v4/v5 compatibility. This setup is crucial for enabling hot module replacement.

```JavaScript
import React from 'react'
import { Route, Switch } from 'react-router' /* react-router v4/v5 */
import { ConnectedRouter } from 'connected-react-router'

const App = ({ history }) => ( /* receive history object via props */
  <ConnectedRouter history={history}>
    <div>
      <Switch>
        <Route exact path="/" render={() => (<div>Match</div>)} />
        <Route render={() => (<div>Miss</div>)} />
      </Switch>
    </div>
  </ConnectedRouter>
)

export default App
```

--------------------------------

### Configure connected-react-router with React Native using createMemoryHistory

Source: https://github.com/supasate/connected-react-router/blob/master/FAQ.md

Since React Native lacks native HTML5 history API support, use `createMemoryHistory` from the `history` library to configure your Redux store. This example demonstrates how to set up `ConnectedRouter` with `createMemoryHistory` within a React Native application, allowing routing functionality in a non-browser environment.

```js
const history = createMemoryHistory()

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <Route path="/" component={myComponent} exact={true} />
    </ConnectedRouter>
  </Provider>
)
```

--------------------------------

### Build Connected React Router Project

Source: https://github.com/supasate/connected-react-router/blob/master/README.md

This command builds the connected-react-router project, compiling source files into the `lib` folder. It is used to prepare the project for distribution or deployment.

```bash
npm run build
```

--------------------------------

### Configure Router props with history functions

Source: https://github.com/supasate/connected-react-router/blob/master/FAQ.md

Illustrates how to pass configuration properties like `basename`, `hashType`, `initialEntries`, and `initialIndex` to `createBrowserHistory`, `createHashHistory`, and `createMemoryHistory` functions from the `history` library.

```js
import { createBrowserHistory } from 'history'

const history = createBrowserHistory({
  basename: '/prefix/',
})
```

```js
import { createHashHistory } from 'history'

const history = createHashHistory({
  hashType: 'slash',
  getUserConfirmation: (message, callback) => callback(window.confirm(message))
})
```

```js
import { createMemoryHistory } from 'history'

const history = createMemoryHistory({
  initialEntries: [ '/one', '/two', { pathname: '/three' } ],
  initialIndex: 1
})
```

--------------------------------

### Navigate with Redux action using connected-react-router

Source: https://github.com/supasate/connected-react-router/blob/master/FAQ.md

Demonstrates various ways to programmatically navigate using `connected-react-router` with Redux actions, including `store.dispatch`, `react-redux` connect, Redux Thunk, and Redux Saga.

```js
import { push } from 'connected-react-router'

store.dispatch(push('/path/to/somewhere'))
```

```js
import { push } from 'connected-react-router'

// in component render:
<div onClick={() => {

  /** do something before redirection */
  props.push('/home');

}}>login</div>

// connect the action:
export default connect(null, { push })(Component);
```

```js
import { push } from 'connected-react-router'

export const login = (username, password) => (dispatch) => {

  /* do something before redirection */

  dispatch(push('/home'))
}
```

```js
import { push } from 'connected-react-router'
import { put, call } from 'redux-saga/effects'

export function* login(username, password) {

  /* do something before redirection */

  yield put(push('/home'))
}
```

--------------------------------

### Migrate connected-react-router: Update createStore Configuration for v5/v6

Source: https://github.com/supasate/connected-react-router/blob/master/FAQ.md

When migrating to connected-react-router v5/v6, update your `createStore` function to use the new root reducer creation function. Instead of directly passing `connectRouter(history)(rootReducer)`, pass `createRootReducer(history)` to the store. This ensures the store is initialized with the correctly configured router reducer.

```diff
// configureStore.js
  ...
  import { createBrowserHistory } from 'history'
  import { applyMiddleware, compose, createStore } from 'redux'
- import { connectRouter, routerMiddleware } from 'connected-react-router'
+ import { routerMiddleware } from 'connected-react-router'
- import rootReducer from './reducers'
+ import createRootReducer from './reducers'

  const history = createBrowserHistory()

  const store = createStore(
-   connectRouter(history)(rootReducer),
+   createRootReducer(history),
    initialState,
    compose(
      applyMiddleware(
        routerMiddleware(history),
      ),
    ),
  )
```

--------------------------------

### Create Redux Store with Immutable.js Root Reducer

Source: https://github.com/supasate/connected-react-router/blob/master/FAQ.md

This snippet demonstrates how to create the Redux store, passing the `history` object to the `rootReducer` function. This ensures that the router reducer is properly initialized within the Immutable.js-compatible Redux store.

```JavaScript
const store = createStore(
  rootReducer(history),
  initialState,
  ...
)
```

--------------------------------

### Create Immutable.js Compatible Root Reducer

Source: https://github.com/supasate/connected-react-router/blob/master/FAQ.md

This snippet illustrates how to create a root reducer compatible with Immutable.js by using `combineReducers` from `redux-immutable`. It shows how to integrate `connectRouter` from `connected-react-router/immutable` to manage router state within an Immutable.js structure.

```JavaScript
import { combineReducers } from 'redux-immutable'
import { connectRouter } from 'connected-react-router/immutable'
...
const rootReducer = (history) => combineReducers({
  router: connectRouter(history),
  ...
})
```

--------------------------------

### Initialize Redux State with Immutable.Map

Source: https://github.com/supasate/connected-react-router/blob/master/FAQ.md

This optional snippet shows how to initialize the Redux store's state with an `Immutable.Map()`. This is a common practice when using Immutable.js to ensure the entire application state is an Immutable Map from the beginning.

```JavaScript
import Immutable from 'immutable'
...
const initialState = Immutable.Map()
...
const store = createStore(
  rootReducer(history),
  initialState,
  ...
)
```

--------------------------------

### Configure Root Reducer with Connected React Router

Source: https://github.com/supasate/connected-react-router/blob/master/README.md

Demonstrates how to integrate `connectRouter` into your Redux root reducer. It's crucial that the router state is mapped to the `router` key within your combined reducers.

```JavaScript
// reducers.js
import { combineReducers } from 'redux'
import { connectRouter } from 'connected-react-router'

const createRootReducer = (history) => combineReducers({
  router: connectRouter(history),
  ... // rest of your reducers
})
export default createRootReducer
```

--------------------------------

### Wrap React App with AppContainer for Hot Reloading

Source: https://github.com/supasate/connected-react-router/blob/master/FAQ.md

This snippet demonstrates how to wrap the root `App` component with `AppContainer` from `react-hot-loader` v3 in `index.js`. It sets up the `ReactDOM.render` function to be reused, ensuring the application is rendered within the hot reloading container and connected to the Redux store.

```JavaScript
import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import { AppContainer } from 'react-hot-loader' /* react-hot-loader v3 */
import App from './App'
...
const render = () => { // this function will be reused
  ReactDOM.render(
    <AppContainer> { /* AppContainer for hot reloading v3 */ }
      <Provider store={store}>
        <App history={history} /> { /* pass history object as props */ }
      </Provider>
    </AppContainer>,
    document.getElementById('react-root')
  )
}

render()
```

--------------------------------

### Migrate connected-react-router: Update Reducers Hot Reloading for v5/v6

Source: https://github.com/supasate/connected-react-router/blob/master/FAQ.md

For hot reloading of reducers in connected-react-router v5/v6, adjust the `store.replaceReducer` calls. Instead of passing `connectRouter(history)(rootReducer)` or `connectRouter(history)(nextRootReducer)`, pass `createRootReducer(history)` or `nextCreateRootReducer(history)` respectively. This ensures hot module replacement works correctly with the updated reducer structure.

```diff
// For Webpack 2.x
- store.replaceReducer(connectRouter(history)(rootReducer))
+ store.replaceReducer(createRootReducer(history))

  // For Webpack 1.x
- const nextRootReducer = require('./reducers').default
- store.replaceReducer(connectRouter(history)(nextRootReducer))
+ const nextCreateRootReducer = require('./reducers').default
+ store.replaceReducer(nextCreateRootReducer(history))
```

--------------------------------

### Implement Hot Module Replacement for React App Component

Source: https://github.com/supasate/connected-react-router/blob/master/FAQ.md

This snippet shows how to use `module.hot.accept` in `index.js` to detect changes in the `App` component and trigger a re-render. It includes comments for Webpack 2.x and 1.x configurations, ensuring that hot reloading works without losing Redux state.

```JavaScript
...
if (module.hot) {
  module.hot.accept('./App', () => {
    /* For Webpack 2.x
       Need to disable babel ES2015 modules transformation in .babelrc
       presets: [
         ["es2015", { "modules": false }]
       ]
    */
    render()

    /* For Webpack 1.x
    const NextApp = require('./App').default
    renderWithHotReload(NextApp)
    */
  })
}
```

--------------------------------

### Configure React Redux Context for Development

Source: https://github.com/supasate/connected-react-router/blob/master/README.md

This snippet illustrates how to explicitly provide the `ReactReduxContext` to both `Provider` and `ConnectedRouter` when using `npm link` or `yarn link` for development. This ensures that `ConnectedRouter` uses the correct Redux context, preventing issues with multiple `node_modules` folders.

```javascript
...
import { Provider, ReactReduxContext } from 'react-redux'
...
      <Provider store={store} context={ReactReduxContext}>
        <App history={history} context={ReactReduxContext} />
      </Provider>
...
```

```javascript
...
const App = ({ history, context }) => {
  return (
    <ConnectedRouter history={history} context={context}>
      { routes }
    </ConnectedRouter>
  )
}
...
```

--------------------------------

### Import Immutable.js Compatible ConnectedRouter and Middleware

Source: https://github.com/supasate/connected-react-router/blob/master/FAQ.md

This snippet shows the correct import statements for `ConnectedRouter` and `routerMiddleware` when working with Immutable.js. These components should be imported from `connected-react-router/immutable` to ensure compatibility with Immutable.js state.

```JavaScript
import { ConnectedRouter, routerMiddleware } from 'connected-react-router/immutable'
```

--------------------------------

### Implement Hot Module Replacement for Redux Reducers

Source: https://github.com/supasate/connected-react-router/blob/master/FAQ.md

This snippet demonstrates how to use `module.hot.accept` in `index.js` to detect changes in Redux reducers and replace the root reducer with a new one, preserving the router state. It provides guidance for both Webpack 2.x and 1.x environments.

```JavaScript
...
if (module.hot) {
  module.hot.accept('./reducers', () => {
    /* For Webpack 2.x
       Need to disable babel ES2015 modules transformation in .babelrc
       presets: [
         ["es2015", { "modules": false }]
       ]
    */
    store.replaceReducer(rootReducer(history))

    /* For Webpack 1.x
    const nextRootReducer = require('./reducers').default
    store.replaceReducer(nextRootReducer(history))
    */
  })
}
```

--------------------------------

### Migrate connected-react-router: Update Root Reducer for v5/v6

Source: https://github.com/supasate/connected-react-router/blob/master/FAQ.md

To migrate from connected-react-router v4 to v5/v6, modify your root reducer to export a function that accepts a `history` object. This function should return a combined reducer with a `router` key, whose value is `connectRouter(history)`. This change ensures the router state is properly managed with the provided history instance.

```diff
// reducers.js

  import { combineReducers } from 'redux'
+ import { connectRouter } from 'connected-react-router'

- export default combineReducers({
+ export default (history) => combineReducers({
+   router: connectRouter(history),
    ...
  })
```

--------------------------------

### Integrate ConnectedRouter with React Redux and React Router

Source: https://github.com/supasate/connected-react-router/blob/master/README.md

This snippet demonstrates how to set up connected-react-router by wrapping react-router v4/v5 routing components with ConnectedRouter. It shows the correct placement of ConnectedRouter as a child of react-redux's Provider and highlights the importance of using the same history object across the router reducer, middleware, and component.

```javascript
// index.js
...
import { Provider } from 'react-redux'
import { Route, Switch } from 'react-router' // react-router v4/v5
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 */ }
      <> { /* your usual react-router v4/v5 routing */ }
        <Switch>
          <Route exact path="/" render={() => (<div>Match</div>)} />
          <Route render={() => (<div>Miss</div>)} />
        </Switch>
      </>
    </ConnectedRouter>
  </Provider>,
  document.getElementById('react-root')
)
```

--------------------------------

### Access current browser location (URL) with connected-react-router

Source: https://github.com/supasate/connected-react-router/blob/master/FAQ.md

Explains how to retrieve the current browser location (pathname, search, hash) from the router state using `react-redux`'s `connect`. The location object provides details about the current URL.

```js
import { connect } from 'react-redux'

const Child = ({ pathname, search, hash }) => (
  <div>
    Child receives
    <div>
      pathname: {pathname}
    </div>
    <div>
      search: {search}
    </div>
    <div>
      hash: {hash}
    </div>
  </div>
)

const mapStateToProps = state => ({
  pathname: state.router.location.pathname,
  search: state.router.location.search,
  hash: state.router.location.hash,
})

export default connect(mapStateToProps)(Child)
```

--------------------------------

### Use Custom React Context with ConnectedRouter and react-redux v6.0.0

Source: https://github.com/supasate/connected-react-router/blob/master/FAQ.md

When using `react-redux` v6.0.0, you can pass a custom React context to the `<Provider>` component. To ensure `ConnectedRouter` also uses this context, you must pass the same `context` prop to the `<ConnectedRouter>` component. This allows your routing logic to operate within your application's specific context.

```js
const customContext = React.createContext(null) // your own context

ReactDOM.render(
  <Provider store={store} context={customContext}>
    <ConnectedRouter history={history} context={customContext}>
      ...
    </ConnectedRouter>
  </Provider>
)
```

--------------------------------

### Disable Initial LOCATION_CHANGE Action in ConnectedRouter

Source: https://github.com/supasate/connected-react-router/blob/master/FAQ.md

By default, `connected-react-router` dispatches a `LOCATION_CHANGE` action for the initial location to maintain compatibility with `react-router-redux`. To prevent this initial dispatch, you can use the `noInitialPop` prop on the `<ConnectedRouter>` component. This can be useful for specific application behaviors where the initial location change is not desired.

```js
ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history} noInitialPop>
      <Route path="/" component={myComponent} exact={true} />
    </ConnectedRouter>
  </Provider>
)
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.