Skip to main content

React-Router v6 Hash Links

Intro

tip

This component has been converted to an NPM package with the following improvements:

  • no longer requires react-router as a dependency
  • typescript compatible

You can view the github repo here: github > ncoughlin/scroll-to-hash-element

and the NPM repo here: npm > scroll-to-hash-element

React-Router does not have built in functionality to handle Hash Links, also known as Anchor Links. Hash links navigate to a specific element on a page by targeting the element id.

Previously this issue was dealt with using a package called react-router-hash-link.

That package doesn't appear to be compatible with react-router-v6 however.

Because i'm not a fan of installing unnecessary packages anyways, i've created a component that solves this issue.

Scrolling itself is provided by the native browser method Element.scrollIntoView()

I've created a Github repo for this component: github: Ncoughlin: ScrollToHashElement

So please check there to make sure you are getting the most recent version of this component, it's possible there will be improvements on this over time.

Component

import { useMemo, useEffect } from "react";
import { useLocation } from "react-router-dom";

const ScrollToHashElement = () => {
let location = useLocation();

let hashElement = useMemo(() => {
let hash = location.hash;
const removeHashCharacter = (str) => {
const result = str.slice(1);
return result;
};

if (hash) {
let element = document.getElementById(removeHashCharacter(hash));
return element;
} else {
return null;
}
}, [location]);

useEffect(() => {
if (hashElement) {
hashElement.scrollIntoView({
behavior: "smooth",
// block: "end",
inline: "nearest",
});
}
}, [hashElement]);

return null;
};

export default ScrollToHashElement;

Installation

Just place this component anywhere in the application and it will work passively in the background.

import React from "react";
// components
import ScrollToHashElement from "./ScrollToHashElement";
import Header from "./Header";
import Content from "./Content";

const App = () => {
return (
<div className="grid">
<ScrollToHashElement />
<Header />
<Content />
</div>
);
};

export default App;

You can create React-Router links as you normally would. For example a link to a hash element on the homepage would look like this

<Link to="/#delightful-visualization">Delightful Visualization</Link>

or this

<Link to="#delightful-visualization">Delightful Visualization</Link>

a sub page like this

<Link to="/about#story">Our Story</Link>

Scroll Behavior

Scroll behavior such as smooth scroll can be easily modified by changing the options in the useEffect portion of the component

hashElement.scrollIntoView({
behavior: "smooth",
// block: "end",
inline: "nearest",
});

Recent Work

Free desktop AI Chat client, designed for developers and businesses. Unlocks advanced model settings only available in the API. Includes quality of life features like custom syntax highlighting.

Learn More
slide-6
slide-5
slide-2
slide-1
slide-3
slide-4
Technologies Used
TypeScript
Electron
React

BidBear

bidbear.io

Bidbear is a report automation tool. It downloads Amazon Seller and Advertising reports, daily, to a private database. It then merges and formats the data into beautiful, on demand, exportable performance reports.

Learn More
slide-1
slide-2
slide-5
slide-3
slide-4

Technologies Used

Front End
JavaScript
Docker
React
Redux
Vite
Next
Docusaurus
Stripe
Sentry
D3
React-Flow
TipTap
Back End
JavaScript
Python
AWS CognitoCognito
AWS API GatewayAPI Gateway
AWS LambdaLambda
AWS AthenaAthena
AWS GlueGlue
AWS Step FunctionsStep Functions
AWS SQSSQS
AWS DynamoDBDynamo DB
AWS S3S3
AWS CloudwatchCloudWatch
AWS CloudFrontCloudFront
AWS Route 53Route 53
AWS EventBridgeEventBridge