{"id":15791,"library":"react-router-scroll","title":"React Router Scroll Management","description":"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.","status":"abandoned","version":"0.4.4","language":"javascript","source_language":"en","source_url":"https://github.com/taion/react-router-scroll","tags":["javascript","react","react router","scroll"],"install":[{"cmd":"npm install react-router-scroll","lang":"bash","label":"npm"},{"cmd":"yarn add react-router-scroll","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-router-scroll","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency since v0.4.0, required for integration with React Router's history object.","package":"history","optional":false},{"reason":"Core React library required for component rendering.","package":"react","optional":false},{"reason":"React DOM for rendering components to the DOM.","package":"react-dom","optional":false},{"reason":"Peer dependency, the library is a middleware designed specifically for React Router v2.x and v3.x.","package":"react-router","optional":false}],"imports":[{"note":"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';'","wrong":"import useScroll from 'react-router-scroll';","symbol":"useScroll","correct":"import { useScroll } from 'react-router-scroll';"},{"note":"Used for managing scroll behavior of specific elements within a component, not the entire window. Only functions with 'useScroll' middleware applied.","wrong":"const ScrollContainer = require('react-router-scroll').ScrollContainer;","symbol":"ScrollContainer","correct":"import { ScrollContainer } from 'react-router-scroll';"},{"note":"This symbol is imported from 'react-router' (v2/v3) itself, not 'react-router-scroll', but is essential for applying 'useScroll'.","symbol":"applyRouterMiddleware","correct":"import { applyRouterMiddleware } from 'react-router';"}],"quickstart":{"code":"import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { applyRouterMiddleware, browserHistory, Router } from 'react-router';\nimport { useScroll } from 'react-router-scroll';\n\n// Define your routes (example)\nconst routes = {\n path: '/',\n component: ({ children }) => (\n
}\n ]\n};\n\nReactDOM.render(\n ,\n document.getElementById('root')\n);\n","lang":"javascript","description":"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."},"warnings":[{"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.","message":"The `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.","severity":"breaking","affected_versions":">=0.4.0"},{"fix":"Update your import statements from `import useScroll from 'react-router-scroll';` to `import { useScroll } from 'react-router-scroll';`.","message":"In v0.3.0, `useScroll` changed from being a default export to a named export. Incorrect import statements will lead to runtime errors.","severity":"breaking","affected_versions":">=0.3.0"},{"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).","message":"This 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.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Conditionally apply `useScroll` only in client-side rendering environments (e.g., `typeof window !== 'undefined'`). `` components will gracefully do nothing on the server.","message":"When performing server-side rendering (SSR), the `useScroll` middleware should not be applied to avoid issues related to DOM manipulation in a non-browser environment.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Ensure `scrollKey` remains static for the lifetime of a `` instance. If a different key or child DOM node is needed, remount the `` component entirely.","message":"The `` 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.","severity":"gotcha","affected_versions":">=0.3.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Update the import statement to use named import: `import { useScroll } from 'react-router-scroll';`","cause":"Attempting to import `useScroll` as a default export after v0.3.0, or using CommonJS `require` incorrectly.","error":"TypeError: (0, _reactRouterScroll.useScroll) is not a function"},{"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.","cause":"This error occurs when trying to use `applyRouterMiddleware` with React Router v4 or newer, which has removed this API.","error":"TypeError: _reactRouter.Router.applyRouterMiddleware is not a function"},{"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).","cause":"`history` version incompatibility with `react-router-scroll` or `react-router`, particularly after `react-router-scroll` v0.4.0 made `history` a peer dependency.","error":"Invariant Violation: Module history does not have a module named default"}],"ecosystem":"npm"}