{"library":"react-router-hash-link","title":"React Router Hash Link","description":"React Router Hash Link provides essential hash fragment scrolling functionality for applications built with React Router v4/5/6. Addressing a long-standing limitation in native React Router's `<Link>` component, this library ensures that navigation to URLs containing hash fragments (e.g., `/path#section-id`) correctly scrolls the viewport to the corresponding HTML element. It is particularly robust as it supports scrolling to elements that might be rendered asynchronously, which is common in data-driven React applications. The current stable version is 2.4.3, with a release cadence that has seen several minor updates, indicating active maintenance. Key differentiators include the ability to specify `smooth` scrolling behavior, a flexible `scroll` prop for custom scrolling logic (e.g., with offsets), and an `elementId` prop offering an alternative to hash fragments. It requires React Router's `BrowserRouter` for proper operation and ships with both `<HashLink>` and `<NavHashLink>` components, mirroring `react-router-dom`'s `Link` and `NavLink`.","language":"javascript","status":"active","last_verified":"Tue Apr 21","install":{"commands":["npm install react-router-hash-link"],"cli":null},"imports":["import { HashLink } from 'react-router-hash-link';","import { NavHashLink } from 'react-router-hash-link';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { BrowserRouter, Routes, Route } from 'react-router-dom';\nimport { HashLink } from 'react-router-hash-link';\nimport React from 'react';\nimport ReactDOM from 'react-dom/client';\n\nfunction App() {\n  return (\n    <BrowserRouter>\n      <nav style={{ padding: '20px', background: '#f0f0f0', position: 'sticky', top: 0, zIndex: 100 }}>\n        <HashLink to=\"/#section1\" smooth>Go to Section 1 (Smooth)</HashLink> | {' '}\n        <HashLink to=\"/#section2\">Go to Section 2 (Instant)</HashLink> | {' '}\n        <HashLink to=\"/#top\">Go to Top of Page</HashLink>\n      </nav>\n      <div id=\"top\" style={{ height: '100vh', background: '#eef', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>\n        <h1>Welcome to the Top</h1>\n      </div>\n      <div id=\"section1\" style={{ height: '100vh', background: '#ccf', paddingTop: '80px' }}>\n        <h2 style={{ marginLeft: '20px' }}>Section 1</h2>\n        <p style={{ marginLeft: '20px' }}>This is the first section. Notice the smooth scroll effect.</p>\n      </div>\n      <div id=\"section2\" style={{ height: '100vh', background: '#aac', paddingTop: '80px' }}>\n        <h2 style={{ marginLeft: '20px' }}>Section 2</h2>\n        <p style={{ marginLeft: '20px' }}>This is the second section. This one scrolls instantly.</p>\n      </div>\n    </BrowserRouter>\n  );\n}\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(<App />);","lang":"javascript","description":"Demonstrates basic usage of `HashLink` within a `BrowserRouter` context, showing how to navigate to and scroll smoothly or instantly to specific sections identified by hash fragments, including scrolling to the top of the page.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}