fix(nav): handle navigation from other pages in SmoothLink #3

2026-01-27T17:27:39Z

jessy-david-dev commented

2026-01-27 17:27:39 +00:00

(Migrated from github.com)

No description provided.

copilot-pull-request-reviewer[bot] (Migrated from github.com) reviewed 2026-01-27 17:30:31 +00:00

copilot-pull-request-reviewer[bot] (Migrated from github.com) left a comment

Pull request overview

Updates SmoothLink to support navigating to home sections (hash anchors) when the user clicks nav links from pages other than /.

Changes:

Add usePathname/useRouter handling to differentiate between home (/), hash anchors (#section), and normal navigation.
Implement special-case behavior for clicking the home link (/) to scroll-to-top when already on /.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

## Pull request overview Updates `SmoothLink` to support navigating to home sections (hash anchors) when the user clicks nav links from pages other than `/`. **Changes:** - Add `usePathname`/`useRouter` handling to differentiate between home (`/`), hash anchors (`#section`), and normal navigation. - Implement special-case behavior for clicking the home link (`/`) to scroll-to-top when already on `/`. --- 💡 <a href="/jessy-david-dev/jessy-david.dev/new/main/.github/instructions?filename=*.instructions.md" class="Link--inTextBlock" target="_blank" rel="noopener noreferrer">Add Copilot custom instructions</a> for smarter, more guided reviews. <a href="https://docs.github.com/en/copilot/customizing-copilot/adding-repository-custom-instructions-for-github-copilot" class="Link--inTextBlock" target="_blank" rel="noopener noreferrer">Learn how to get started</a>.

component/ui/SmoothLink.tsx

						
				@@ -22,0 +31,4 @@

				        // On est sur une autre page, naviguer vers l'accueil

				        router.push("/");

				      }

				      onClick?.();

copilot-pull-request-reviewer[bot] (Migrated from github.com) commented

2026-01-27 17:30:30 +00:00

handleClick calls e.preventDefault() unconditionally, which breaks standard link behaviors like Cmd/Ctrl+click or middle-click to open in a new tab/window (and can interfere with keyboard accessibility expectations). Consider only preventing default for same-page smooth-scroll cases, and early-return to let the browser handle modified clicks (e.g., e.metaKey, e.ctrlKey, e.shiftKey, e.altKey, or e.button !== 0).

  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
    // Allow default browser behavior for modified clicks or non-left clicks
    if (
      e.defaultPrevented ||
      e.button !== 0 ||
      e.metaKey ||
      e.ctrlKey ||
      e.shiftKey ||
      e.altKey
    ) {
      return;
    }

`handleClick` calls `e.preventDefault()` unconditionally, which breaks standard link behaviors like Cmd/Ctrl+click or middle-click to open in a new tab/window (and can interfere with keyboard accessibility expectations). Consider only preventing default for same-page smooth-scroll cases, and early-return to let the browser handle modified clicks (e.g., `e.metaKey`, `e.ctrlKey`, `e.shiftKey`, `e.altKey`, or `e.button !== 0`). ```suggestion const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => { // Allow default browser behavior for modified clicks or non-left clicks if ( e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey ) { return; } ```

component/ui/SmoothLink.tsx

copilot-pull-request-reviewer[bot] (Migrated from github.com) commented

2026-01-27 17:30:31 +00:00

For hash links (href starting with #) on non-home pages, the rendered <a href={href}> still points to just #section, so “Copy link address” / opening via context menu (or any non-JS fallback) won’t navigate back to /#section. Consider computing an actualHref (e.g., /#... when pathname !== "/") and using that for the anchor’s href attribute, while keeping the smooth-scroll behavior when already on /.

  const actualHref =
    href.startsWith("#") && pathname !== "/" ? `/${href}` : href;

  return (
    <a href={actualHref} onClick={handleClick} className={className}>

For hash links (`href` starting with `#`) on non-home pages, the rendered `<a href={href}>` still points to just `#section`, so “Copy link address” / opening via context menu (or any non-JS fallback) won’t navigate back to `/#section`. Consider computing an `actualHref` (e.g., `/#...` when `pathname !== "/"`) and using that for the anchor’s `href` attribute, while keeping the smooth-scroll behavior when already on `/`. ```suggestion const actualHref = href.startsWith("#") && pathname !== "/" ? `/${href}` : href; return ( <a href={actualHref} onClick={handleClick} className={className}> ```

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: Jessy/jessy-david.dev#3