Registry / web-framework / react-router-scroll

react-router-scroll

library0.4.4jsnpmunverified

react-router-scroll is a middleware for React Router versions 2.x and 3.x, providing advanced scroll management capabilities for web applications. It allows developers to customize scroll behavior during route transitions, enabling features like scrolling to the top of the page, to specific pixel coordinates, or to named HTML elements based on routing events. The library internally uses `scroll-behavior` for its core functionality. The current stable version is 0.4.4, with the last notable release in 2017. Due to fundamental changes in React Router v4 and subsequent versions (which removed the router middleware concept), this library is not compatible with modern React Router setups. It is considered abandoned for new projects utilizing React Router v4, v5, or v6, with no active development or planned compatibility updates for newer React Router APIs.

web-framework

npm install react-router-scroll

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-ROUTER-SCROL

react-router-scroll

web-frameworkjavascriptv0.4.4

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

useScroll

✓ import { useScroll } from 'react-router-scroll';

✗ import useScroll from 'react-router-scroll';

Changed from a default export to a named export in v0.3.0. Prior to v0.3.0, it was a default export. For bundle size optimization, consider 'import useScroll from 'react-router-scroll/lib/useScroll';'

ScrollContainer

✓ import { ScrollContainer } from 'react-router-scroll';

✗ const ScrollContainer = require('react-router-scroll').ScrollContainer;

Used for managing scroll behavior of specific elements within a component, not the entire window. Only functions with 'useScroll' middleware applied.

applyRouterMiddleware

✓ import { applyRouterMiddleware } from 'react-router';

This symbol is imported from 'react-router' (v2/v3) itself, not 'react-router-scroll', but is essential for applying 'useScroll'.

This example demonstrates basic setup for `react-router-scroll` with React Router v2/v3, applying `useScroll` as a router middleware to manage default browser-style scroll behavior on route transitions.

import React from 'react'; import ReactDOM from 'react-dom'; import { applyRouterMiddleware, browserHistory, Router } from 'react-router'; import { useScroll } from 'react-router-scroll'; // Define your routes (example) const routes = { path: '/', component: ({ children }) => ( <div> <h1>Welcome</h1> {children} </div> ), indexRoute: { component: () => <p>Home Page Content</p> }, childRoutes: [ { path: 'about', component: () => <p>About Us Content</p> }, { path: 'contact', component: () => <p>Contact Us Content</p> } ] }; ReactDOM.render( <Router history={browserHistory} routes={routes} render={applyRouterMiddleware(useScroll())} />, document.getElementById('root') );

Debug

Known issues

breakingThe `history` package became a peer dependency in v0.4.0. Projects must explicitly install a compatible `history` version (`^2.0.0 || ^3.0.0`) that aligns with their React Router v2/v3 installation.

fix

Ensure `history` is installed as a dependency (`npm install history@^2.0.0 || ^3.0.0`) and that its version is compatible with your `react-router` version.

affects: >=0.4.0

breakingIn v0.3.0, `useScroll` changed from being a default export to a named export. Incorrect import statements will lead to runtime errors.

fix

Update your import statements from `import useScroll from 'react-router-scroll';` to `import { useScroll } from 'react-router-scroll';`.

affects: >=0.3.0

gotchaThis library is NOT compatible with React Router v4, v5, or v6. React Router v4 removed the router middleware concept that `react-router-scroll` relies on. Attempting to use it with newer React Router versions will result in errors.

fix

For React Router v4+, consult the React Router documentation for scroll restoration or use alternative community packages designed for newer React Router APIs (e.g., `react-router-dom`'s built-in scroll restoration).

affects: >=0.1.0

gotchaWhen performing server-side rendering (SSR), the `useScroll` middleware should not be applied to avoid issues related to DOM manipulation in a non-browser environment.

fix

Conditionally apply `useScroll` only in client-side rendering environments (e.g., `typeof window !== 'undefined'`). `<ScrollContainer>` components will gracefully do nothing on the server.

affects: >=0.1.0

gotchaThe `<ScrollContainer>` component does not support dynamic changes to its `scrollKey` prop or to the underlying DOM node of its child. Changing these properties after initial render may lead to unexpected scroll behavior.

fix

Ensure `scrollKey` remains static for the lifetime of a `<ScrollContainer>` instance. If a different key or child DOM node is needed, remount the `<ScrollContainer>` component entirely.

affects: >=0.3.0

Errors

Common errors & fixes

TypeError: (0, _reactRouterScroll.useScroll) is not a function

Attempting to import `useScroll` as a default export after v0.3.0, or using CommonJS `require` incorrectly.

fix

Update the import statement to use named import: `import { useScroll } from 'react-router-scroll';`

TypeError: _reactRouter.Router.applyRouterMiddleware is not a function

This error occurs when trying to use `applyRouterMiddleware` with React Router v4 or newer, which has removed this API.

fix

`react-router-scroll` is incompatible with React Router v4+. Downgrade React Router to v2 or v3, or migrate your application's scroll management to a solution compatible with modern React Router versions.

Invariant Violation: Module history does not have a module named default

`history` version incompatibility with `react-router-scroll` or `react-router`, particularly after `react-router-scroll` v0.4.0 made `history` a peer dependency.

fix

Ensure your project's `history` dependency (`npm list history`) matches the `^2.0.0 || ^3.0.0` requirement and is consistent with your installed `react-router` version (v2.x or v3.x).

Upgrade

Version history

0.4.4latest on npm

Audit

Dependencies

historyrequiredPeer dependency since v0.4.0, required for integration with React Router's history object.

reactrequiredCore React library required for component rendering.

react-domrequiredReact DOM for rendering components to the DOM.

react-routerrequiredPeer dependency, the library is a middleware designed specifically for React Router v2.x and v3.x.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/taion/react-router-scroll ↗

packagehttps://www.npmjs.com/package/react-router-scroll ↗