or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

immutable-support.mdindex.mdnavigation.mdredux-integration.mdselectors.md
tile.json

tessl/npm-connected-react-router

A Redux binding for React Router v4 and v5 that synchronizes router state with Redux store

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/connected-react-router@6.9.x

To install, run

npx @tessl/cli install tessl/npm-connected-react-router@6.9.0

index.mddocs/

Connected React Router

Connected React Router is a Redux binding for React Router v4 and v5 that synchronizes router state with Redux store through uni-directional flow. It enables dispatching history actions for both redux-thunk and redux-saga, provides access to routing state for nested components through react-redux's connect, and supports time traveling in Redux DevTools.

Package Information

  • Package Name: connected-react-router
  • Package Type: npm
  • Language: JavaScript (with TypeScript definitions)
  • Installation: npm install connected-react-router

Core Imports

import { ConnectedRouter, connectRouter, routerMiddleware } from "connected-react-router";
import { push, replace, go, goBack, goForward } from "connected-react-router";
import { getLocation, getAction, getRouter } from "connected-react-router";

For CommonJS:

const { ConnectedRouter, connectRouter, routerMiddleware } = require("connected-react-router");

Basic Usage

import { createBrowserHistory } from 'history';
import { combineReducers, createStore, applyMiddleware } from 'redux';
import { connectRouter, routerMiddleware } from 'connected-react-router';

// Create history instance
const history = createBrowserHistory();

// Create root reducer with router
const rootReducer = combineReducers({
  router: connectRouter(history),
  // other reducers...
});

// Create store with router middleware
const store = createStore(
  rootReducer,
  applyMiddleware(routerMiddleware(history))
);

// Wrap your app with ConnectedRouter
import { ConnectedRouter } from 'connected-react-router';

function App() {
  return (
    <ConnectedRouter history={history}>
      {/* Your route components */}
    </ConnectedRouter>
  );
}

Architecture

Connected React Router bridges React Router and Redux through several key components:

  • Redux Integration: ConnectedRouter component, connectRouter reducer, and routerMiddleware for connecting React Router to Redux
  • Navigation Actions: Action creators (push, replace, go, etc.) that dispatch Redux actions to trigger navigation
  • State Selectors: Utility functions for accessing router state from Redux store (getLocation, getRouter, etc.)
  • Immutable Support: Separate entry points for Immutable.js and seamless-immutable state structures
  • TypeScript Integration: Complete type definitions for all APIs and state structures

Capabilities

Redux Integration

Core Redux integration components for connecting React Router to your Redux store and enabling router state synchronization.

function ConnectedRouter(props: ConnectedRouterProps): React.Component;
function connectRouter(history: History): Reducer<RouterState>;
function routerMiddleware(history: History): Middleware;

Redux Integration

Navigation Actions

Action creators for programmatic navigation that work seamlessly with both redux-thunk and redux-saga middleware.

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;

Navigation Actions

State Selectors

Utility functions for accessing router state and location information from your Redux store with memoization support.

function getLocation(state: RouterRootState): RouterLocation;
function getRouter(state: RouterRootState): RouterState;
function getAction(state: RouterRootState): RouterActionType;
function createMatchSelector(path: PathParam): (state: RouterRootState) => match | null;

State Selectors

Immutable Support

Specialized entry points providing full API compatibility for applications using Immutable.js or seamless-immutable state structures.

import { ConnectedRouter, connectRouter } from "connected-react-router/immutable";
import { ConnectedRouter, connectRouter } from "connected-react-router/seamless-immutable";

Immutable Support