Specialized entry points providing full API compatibility for applications using Immutable.js or seamless-immutable state structures. These variants handle the different data access patterns required by immutable state libraries while maintaining identical APIs.
Entry point for applications using Immutable.js data structures in their Redux store.
/**
* Import from immutable entry point for Immutable.js compatibility
*/
import {
ConnectedRouter,
connectRouter,
routerMiddleware,
push,
replace,
go,
goBack,
goForward,
getLocation,
getRouter,
getAction,
getSearch,
getHash,
createMatchSelector,
routerActions,
LOCATION_CHANGE,
CALL_HISTORY_METHOD,
onLocationChanged
} from "connected-react-router/immutable";Usage Examples:
// Standard setup with Immutable.js
import { Map } from 'immutable';
import { combineReducers } from 'redux-immutable';
import { createBrowserHistory } from 'history';
import { ConnectedRouter, connectRouter, routerMiddleware } from 'connected-react-router/immutable';
const history = createBrowserHistory();
// Use redux-immutable's combineReducers
const rootReducer = combineReducers({
router: connectRouter(history),
user: userReducer,
posts: postsReducer,
});
// Middleware works the same
const store = createStore(
rootReducer,
Map(), // Initial state as Immutable Map
applyMiddleware(routerMiddleware(history))
);
// ConnectedRouter usage identical
function App() {
return (
<ConnectedRouter history={history}>
{/* Your routes */}
</ConnectedRouter>
);
}// Selectors work with Immutable state
import { getLocation, getRouter } from 'connected-react-router/immutable';
const mapStateToProps = (state) => ({
// Selectors handle Immutable data access internally
location: getLocation(state),
router: getRouter(state),
});
// Navigation actions work identically
import { push, replace } from 'connected-react-router/immutable';
dispatch(push('/users'));
dispatch(replace('/login'));Entry point for applications using seamless-immutable data structures in their Redux store.
/**
* Import from seamless-immutable entry point
*/
import {
ConnectedRouter,
connectRouter,
routerMiddleware,
push,
replace,
go,
goBack,
goForward,
getLocation,
getRouter,
getAction,
getSearch,
getHash,
createMatchSelector,
routerActions,
LOCATION_CHANGE,
CALL_HISTORY_METHOD,
onLocationChanged
} from "connected-react-router/seamless-immutable";Usage Examples:
// Standard setup with seamless-immutable
import Immutable from 'seamless-immutable';
import { combineReducers, createStore, applyMiddleware } from 'redux';
import { createBrowserHistory } from 'history';
import { ConnectedRouter, connectRouter, routerMiddleware } from 'connected-react-router/seamless-immutable';
const history = createBrowserHistory();
// Use standard Redux combineReducers
const rootReducer = combineReducers({
router: connectRouter(history),
user: userReducer,
posts: postsReducer,
});
const store = createStore(
rootReducer,
Immutable({}), // Initial state as seamless-immutable object
applyMiddleware(routerMiddleware(history))
);// All selectors work with seamless-immutable state
import { getLocation, createMatchSelector } from 'connected-react-router/seamless-immutable';
const selectUserMatch = createMatchSelector('/users/:userId');
const mapStateToProps = (state) => ({
location: getLocation(state),
userMatch: selectUserMatch(state),
});Both immutable variants provide identical APIs to the main package while handling the underlying data structure differences internally.
/**
* All exports are identical across variants:
* - connected-react-router (plain objects)
* - connected-react-router/immutable (Immutable.js)
* - connected-react-router/seamless-immutable (seamless-immutable)
*
* Components, functions, constants, and types are the same
*/
// Components
const ConnectedRouter: React.ComponentType<ConnectedRouterProps>;
// Redux integration
function connectRouter(history: History): Reducer;
function routerMiddleware(history: History): Middleware;
// Navigation actions
function push(path: string, state?: any): CallHistoryMethodAction;
function replace(path: string, state?: any): CallHistoryMethodAction;
function go(n: number): CallHistoryMethodAction;
function goBack(): CallHistoryMethodAction;
function goForward(): CallHistoryMethodAction;
// Selectors
function getLocation(state: RouterRootState): RouterLocation;
function getRouter(state: RouterRootState): RouterState;
function getAction(state: RouterRootState): RouterActionType;
function getSearch(state: RouterRootState): string;
function getHash(state: RouterRootState): string;
function createMatchSelector(path: PathParam): (state: RouterRootState) => match | null;
// Constants and utilities
const LOCATION_CHANGE: string;
const CALL_HISTORY_METHOD: string;
const routerActions: object;
function onLocationChanged(location: Location, action: RouterActionType, isFirstRendering?: boolean): LocationChangeAction;The immutable variants use different internal data access strategies:
getIn() method for nested property access on Immutable Maps/ListsAll variants return plain JavaScript objects from selectors to maintain compatibility with React components and other libraries that expect standard objects.
TypeScript definitions are shared across all variants, providing the same type safety regardless of which entry point you use.
// All variants support the same TypeScript interfaces
interface RouterState<S = LocationState> {
location: RouterLocation<S>;
action: RouterActionType;
}
interface ConnectedRouterProps<S = LocationState> {
history: History<S>;
context?: React.Context<ReactReduxContextValue>;
noInitialPop?: boolean;
noTimeTravelDebugging?: boolean;
omitRouter?: boolean;
children?: React.ReactNode;
}Switching between variants requires only changing the import path - no other code changes are needed:
// From plain state
import { ConnectedRouter } from 'connected-react-router';
// To Immutable.js
import { ConnectedRouter } from 'connected-react-router/immutable';
// To seamless-immutable
import { ConnectedRouter } from 'connected-react-router/seamless-immutable';