fix: Fix navigation links and add smooth scrolling to hash fragments

- Update Link components in Home.tsx to use correct /check prefix for routing
- Add useEffect hook in About.tsx to handle smooth scrolling to hash fragments
- Add delay to ensure page renders before scrolling to target element
This commit is contained in:
tnga
2025-06-12 14:09:52 +01:00
parent 50a11a5f50
commit cdf7875ddb
2 changed files with 19 additions and 2 deletions

View File

@ -1,4 +1,6 @@
import styled from '@emotion/styled';
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import colors from 'web-check-live/styles/colors';
import Heading from 'web-check-live/components/Form/Heading';
@ -118,6 +120,21 @@ const makeAnchor = (title: string): string => {
};
const About = (): JSX.Element => {
const location = useLocation();
useEffect(() => {
// Scroll to hash fragment if present
if (location.hash) {
// Add a small delay to ensure the page has fully rendered
setTimeout(() => {
const element = document.getElementById(location.hash.slice(1));
if (element) {
element.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
}, 100);
}
}, [location]);
return (
<div>
<AboutContainer>

View File

@ -278,7 +278,7 @@ const Home = (): JSX.Element => {
<Heading as="h2" size="small" color={colors.primary}>Supported Checks</Heading>
<ul>
{docs.map((doc, index) => (<li key={index}>{doc.title}</li>))}
<li><Link to="/about">+ more!</Link></li>
<li><Link to="/check/about">+ more!</Link></li>
</ul>
</div>
<div className="links">
@ -288,7 +288,7 @@ const Home = (): JSX.Element => {
<a target="_blank" rel="noreferrer" href="https://app.netlify.com/start/deploy?repository=https://github.com/lissy93/web-check" title="Deploy your own private or public instance of Web-Check to Netlify">
<Button>Deploy your own</Button>
</a>
<Link to="/about#api-documentation" title="View the API documentation, to use Web-Check programmatically">
<Link to="/check/about#api-documentation" title="View the API documentation, to use Web-Check programmatically">
<Button>API Docs</Button>
</Link>
</div>