diff --git a/__fixtures__/test-project/web/src/layouts/BlogLayout/BlogLayout.tsx b/__fixtures__/test-project/web/src/layouts/BlogLayout/BlogLayout.tsx
index 7236aa4b1f07..7d05fe986014 100644
--- a/__fixtures__/test-project/web/src/layouts/BlogLayout/BlogLayout.tsx
+++ b/__fixtures__/test-project/web/src/layouts/BlogLayout/BlogLayout.tsx
@@ -2,7 +2,7 @@ type BlogLayoutProps = {
   children?: React.ReactNode
 }
 
-import { Link, routes } from '@redwoodjs/router'
+import { Link, NavLink, routes } from '@redwoodjs/router'
 
 import { useAuth } from 'src/auth'
 
@@ -23,48 +23,53 @@ const BlogLayout = ({ children }: BlogLayoutProps) => {
         <nav>
           <ul className="relative flex items-center font-light">
             <li>
-              <Link
+              <NavLink
                 className="rounded px-4 py-2 transition duration-100 hover:bg-blue-600"
+                activeClassName="py-2 px-4 hover:bg-blue-600 transition duration-100 rounded underline underline-offset-4"
                 to={routes.about()}
               >
                 About
-              </Link>
+              </NavLink>
             </li>
             <li>
-              <Link
+              <NavLink
                 className="rounded px-4 py-2 transition duration-100 hover:bg-blue-600"
+                activeClassName="py-2 px-4 hover:bg-blue-600 transition duration-100 rounded underline underline-offset-4"
                 to={routes.contactUs()}
               >
                 Contact Us
-              </Link>
+              </NavLink>
             </li>
             <li>
-              <Link
+              <NavLink
                 className="rounded px-4 py-2 transition duration-100 hover:bg-blue-600"
+                activeClassName="py-2 px-4 hover:bg-blue-600 transition duration-100 rounded underline underline-offset-4"
                 to={routes.posts()}
               >
                 Admin
-              </Link>
+              </NavLink>
             </li>
             {isAuthenticated && (
               <li>
-                <Link
+                <NavLink
                   className="rounded px-4 py-2 transition duration-100 hover:bg-blue-600"
+                  activeClassName="py-2 px-4 hover:bg-blue-600 transition duration-100 rounded underline underline-offset-4"
                   onClick={logOut}
                   to={''}
                 >
                   Log Out
-                </Link>
+                </NavLink>
               </li>
             )}
             {!isAuthenticated && (
               <li>
-                <Link
+                <NavLink
                   className="rounded px-4 py-2 transition duration-100 hover:bg-blue-600"
+                  activeClassName="py-2 px-4 hover:bg-blue-600 transition duration-100 rounded underline underline-offset-4"
                   to={routes.login()}
                 >
                   Log In
-                </Link>
+                </NavLink>
               </li>
             )}
           </ul>
diff --git a/packages/router/src/ActivePageContext.tsx b/packages/router/src/ActivePageContext.tsx
index 2cb1aaa3aeeb..9b45d6d33505 100644
--- a/packages/router/src/ActivePageContext.tsx
+++ b/packages/router/src/ActivePageContext.tsx
@@ -1,7 +1,7 @@
 import { useContext } from 'react'
 
+import { createNamedContext } from './createNamedContext'
 import type { LocationContextType } from './location'
-import { createNamedContext } from './util'
 
 export type LoadingState = 'PRE_SHOW' | 'SHOW_LOADING' | 'DONE'
 export type LoadingStateRecord = Record<
diff --git a/packages/router/src/AuthenticatedRoute.tsx b/packages/router/src/AuthenticatedRoute.tsx
index 79091ab03260..73838a346eba 100644
--- a/packages/router/src/AuthenticatedRoute.tsx
+++ b/packages/router/src/AuthenticatedRoute.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react'
 
-import { Redirect } from './links'
+import { Redirect } from './redirect'
 import { routes } from './router'
 import { useRouterState } from './router-context'
 import type { GeneratedRoutesMap } from './util'
diff --git a/packages/router/src/PageLoadingContext.tsx b/packages/router/src/PageLoadingContext.tsx
index 91ba39085c99..513076abd770 100644
--- a/packages/router/src/PageLoadingContext.tsx
+++ b/packages/router/src/PageLoadingContext.tsx
@@ -1,6 +1,6 @@
 import { useContext, useState } from 'react'
 
-import { createNamedContext } from './util'
+import { createNamedContext } from './createNamedContext'
 
 export interface PageLoadingContextInterface {
   loading: boolean
diff --git a/packages/router/src/__tests__/links.test.tsx b/packages/router/src/__tests__/links.test.tsx
index 929b3c68104f..f5001d132c38 100644
--- a/packages/router/src/__tests__/links.test.tsx
+++ b/packages/router/src/__tests__/links.test.tsx
@@ -2,8 +2,8 @@ import React from 'react'
 
 import { render } from '@testing-library/react'
 
-import { NavLink } from '../links'
 import { LocationProvider } from '../location'
+import { NavLink } from '../navLink'
 
 function createDummyLocation(pathname: string, search = '') {
   return {
diff --git a/packages/router/src/__tests__/useMatch.test.tsx b/packages/router/src/__tests__/useMatch.test.tsx
index ae53a231b06b..5320bbac07a8 100644
--- a/packages/router/src/__tests__/useMatch.test.tsx
+++ b/packages/router/src/__tests__/useMatch.test.tsx
@@ -4,7 +4,7 @@ import '@testing-library/jest-dom'
 
 import { render, renderHook as tlrRenderHook } from '@testing-library/react'
 
-import { Link } from '../links'
+import { Link } from '../link'
 import { LocationProvider } from '../location'
 import { useMatch } from '../useMatch'
 import { flattenSearchParams } from '../util'
diff --git a/packages/router/src/createNamedContext.ts b/packages/router/src/createNamedContext.ts
new file mode 100644
index 000000000000..21720b1f3cbb
--- /dev/null
+++ b/packages/router/src/createNamedContext.ts
@@ -0,0 +1,8 @@
+import { createContext } from 'react'
+
+/** Create a React Context with the given name. */
+export function createNamedContext<T>(name: string, defaultValue?: T) {
+  const Ctx = createContext<T | undefined>(defaultValue)
+  Ctx.displayName = name
+  return Ctx
+}
diff --git a/packages/router/src/index.ts b/packages/router/src/index.ts
index 3840c793a140..b7774a388c90 100644
--- a/packages/router/src/index.ts
+++ b/packages/router/src/index.ts
@@ -3,8 +3,10 @@
 // latter of which has closely inspired some of this code).
 
 export { navigate, back } from './history'
-export { Link, NavLink, Redirect } from './links'
+export { NavLink } from './navLink'
+export { Link } from './link'
 export { useLocation, LocationProvider } from './location'
+export { Redirect } from './redirect'
 export {
   usePageLoadingContext,
   PageLoadingContextProvider,
diff --git a/packages/router/src/link.tsx b/packages/router/src/link.tsx
new file mode 100644
index 000000000000..11d13aa6389f
--- /dev/null
+++ b/packages/router/src/link.tsx
@@ -0,0 +1,46 @@
+'use client'
+
+// This needs to be a client component because it uses onClick, and the onClick
+// event handler can't be serialized when passed as an RSC Flight response
+
+import { forwardRef } from 'react'
+
+import { navigate } from './history'
+
+export interface LinkProps {
+  to: string
+  onClick?: React.MouseEventHandler<HTMLAnchorElement>
+}
+
+export const Link = forwardRef<
+  HTMLAnchorElement,
+  LinkProps & React.AnchorHTMLAttributes<HTMLAnchorElement>
+>(({ to, onClick, ...rest }, ref) => (
+  <a
+    href={to}
+    ref={ref}
+    {...rest}
+    onClick={(event) => {
+      if (
+        event.button !== 0 ||
+        event.altKey ||
+        event.ctrlKey ||
+        event.metaKey ||
+        event.shiftKey
+      ) {
+        return
+      }
+
+      event.preventDefault()
+
+      if (onClick) {
+        const result = onClick(event)
+        if (typeof result !== 'boolean' || result) {
+          navigate(to)
+        }
+      } else {
+        navigate(to)
+      }
+    }}
+  />
+))
diff --git a/packages/router/src/links.tsx b/packages/router/src/links.tsx
deleted file mode 100644
index aea10f978d6a..000000000000
--- a/packages/router/src/links.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-import { forwardRef, useEffect } from 'react'
-
-import type { NavigateOptions } from './history'
-import { navigate } from './history'
-import { useMatch } from './useMatch'
-import type { FlattenSearchParams } from './util'
-import { flattenSearchParams } from './util'
-
-interface LinkProps {
-  to: string
-  onClick?: React.MouseEventHandler<HTMLAnchorElement>
-}
-
-const Link = forwardRef<
-  HTMLAnchorElement,
-  LinkProps & React.AnchorHTMLAttributes<HTMLAnchorElement>
->(({ to, onClick, ...rest }, ref) => (
-  <a
-    href={to}
-    ref={ref}
-    {...rest}
-    onClick={(event) => {
-      if (
-        event.button !== 0 ||
-        event.altKey ||
-        event.ctrlKey ||
-        event.metaKey ||
-        event.shiftKey
-      ) {
-        return
-      }
-
-      event.preventDefault()
-
-      if (onClick) {
-        const result = onClick(event)
-        if (typeof result !== 'boolean' || result) {
-          navigate(to)
-        }
-      } else {
-        navigate(to)
-      }
-    }}
-  />
-))
-
-interface NavLinkProps {
-  to: string
-  activeClassName: string
-  activeMatchParams?: FlattenSearchParams
-  matchSubPaths?: boolean
-  onClick?: React.MouseEventHandler<HTMLAnchorElement>
-}
-
-const NavLink = forwardRef<
-  HTMLAnchorElement,
-  NavLinkProps & React.AnchorHTMLAttributes<HTMLAnchorElement>
->(
-  (
-    {
-      to,
-      activeClassName,
-      activeMatchParams,
-      matchSubPaths,
-      className,
-      onClick,
-      ...rest
-    },
-    ref
-  ) => {
-    // Separate pathname and search parameters, USVString expected
-    const [pathname, queryString] = to.split('?')
-    const searchParams = activeMatchParams || flattenSearchParams(queryString)
-    const matchInfo = useMatch(pathname, {
-      searchParams,
-      matchSubPaths,
-    })
-    const theClassName = [className, matchInfo.match && activeClassName]
-      .filter(Boolean)
-      .join(' ')
-
-    return (
-      <a
-        href={to}
-        ref={ref}
-        className={theClassName}
-        {...rest}
-        onClick={(event) => {
-          if (
-            event.button !== 0 ||
-            event.altKey ||
-            event.ctrlKey ||
-            event.metaKey ||
-            event.shiftKey
-          ) {
-            return
-          }
-
-          event.preventDefault()
-
-          if (onClick) {
-            const result = onClick(event)
-            if (typeof result !== 'boolean' || result) {
-              navigate(to)
-            }
-          } else {
-            navigate(to)
-          }
-        }}
-      />
-    )
-  }
-)
-
-interface RedirectProps {
-  /** The path to redirect to */
-  to: string
-  options?: NavigateOptions
-}
-
-/**
- * A declarative way to redirect to a route name
- */
-const Redirect = ({ to, options }: RedirectProps) => {
-  useEffect(() => {
-    navigate(to, options)
-  }, [to, options])
-
-  return null
-}
-
-export { Link, NavLink, Redirect }
diff --git a/packages/router/src/location.tsx b/packages/router/src/location.tsx
index 8a8fd5b4b028..0623d109e0b9 100644
--- a/packages/router/src/location.tsx
+++ b/packages/router/src/location.tsx
@@ -1,8 +1,8 @@
 import React from 'react'
 
+import { createNamedContext } from './createNamedContext'
 import { gHistory } from './history'
 import type { TrailingSlashesTypes } from './util'
-import { createNamedContext } from './util'
 
 export interface LocationContextType {
   pathname: string
diff --git a/packages/router/src/navLink.tsx b/packages/router/src/navLink.tsx
new file mode 100644
index 000000000000..1423aac8b9a8
--- /dev/null
+++ b/packages/router/src/navLink.tsx
@@ -0,0 +1,53 @@
+'use client'
+
+import { forwardRef } from 'react'
+
+import { Link, type LinkProps } from './link'
+import { useMatch } from './useMatch'
+import type { FlattenSearchParams } from './util'
+import { flattenSearchParams } from './util'
+
+interface NavLinkProps extends LinkProps {
+  activeClassName: string
+  activeMatchParams?: FlattenSearchParams
+  matchSubPaths?: boolean
+}
+
+export const NavLink = forwardRef<
+  HTMLAnchorElement,
+  NavLinkProps & React.AnchorHTMLAttributes<HTMLAnchorElement>
+>(
+  (
+    {
+      to,
+      activeClassName,
+      activeMatchParams,
+      matchSubPaths,
+      className,
+      onClick,
+      ...rest
+    },
+    ref
+  ) => {
+    // Separate pathname and search parameters, USVString expected
+    const [pathname, queryString] = to.split('?')
+    const searchParams = activeMatchParams || flattenSearchParams(queryString)
+    const matchInfo = useMatch(pathname, {
+      searchParams,
+      matchSubPaths,
+    })
+    const theClassName = [className, matchInfo.match && activeClassName]
+      .filter(Boolean)
+      .join(' ')
+
+    return (
+      <Link
+        ref={ref}
+        to={to}
+        onClick={onClick}
+        className={theClassName}
+        {...rest}
+      />
+    )
+  }
+)
diff --git a/packages/router/src/params.tsx b/packages/router/src/params.tsx
index e583c0633af5..13239457f17f 100644
--- a/packages/router/src/params.tsx
+++ b/packages/router/src/params.tsx
@@ -1,6 +1,6 @@
 import React, { useContext } from 'react'
 
-import { createNamedContext } from './util'
+import { createNamedContext } from './createNamedContext'
 
 export interface ParamsContextProps {
   params: Record<string, string>
diff --git a/packages/router/src/redirect.ts b/packages/router/src/redirect.ts
new file mode 100644
index 000000000000..071e35f82559
--- /dev/null
+++ b/packages/router/src/redirect.ts
@@ -0,0 +1,21 @@
+import { useEffect } from 'react'
+
+import type { NavigateOptions } from './history'
+import { navigate } from './history'
+
+interface RedirectProps {
+  /** The path to redirect to */
+  to: string
+  options?: NavigateOptions
+}
+
+/**
+ * A declarative way to redirect to a route name
+ */
+export const Redirect = ({ to, options }: RedirectProps) => {
+  useEffect(() => {
+    navigate(to, options)
+  }, [to, options])
+
+  return null
+}
diff --git a/packages/router/src/router.tsx b/packages/router/src/router.tsx
index f1f401cd8db8..ea795a922681 100644
--- a/packages/router/src/router.tsx
+++ b/packages/router/src/router.tsx
@@ -3,10 +3,10 @@ import React, { useMemo, memo } from 'react'
 
 import { ActiveRouteLoader } from './active-route-loader'
 import { AuthenticatedRoute } from './AuthenticatedRoute'
-import { Redirect } from './links'
 import { LocationProvider, useLocation } from './location'
 import { PageLoadingContextProvider } from './PageLoadingContext'
 import { ParamsProvider } from './params'
+import { Redirect } from './redirect'
 import type {
   NotFoundRouteProps,
   RedirectRouteProps,
diff --git a/packages/router/src/util.ts b/packages/router/src/util.ts
index 8aa198e8b59b..b385325b6cb8 100644
--- a/packages/router/src/util.ts
+++ b/packages/router/src/util.ts
@@ -1,5 +1,6 @@
+// These are utils that can be shared between both server- and client components
 import type { ReactElement, ReactNode } from 'react'
-import React, { Children, isValidElement } from 'react'
+import { Children, isValidElement } from 'react'
 
 import {
   isNotFoundRoute,
@@ -10,13 +11,6 @@ import {
 import type { PageType } from './router'
 import { isPrivateNode, isPrivateSetNode, isSetNode } from './Set'
 
-/** Create a React Context with the given name. */
-export function createNamedContext<T>(name: string, defaultValue?: T) {
-  const Ctx = React.createContext<T | undefined>(defaultValue)
-  Ctx.displayName = name
-  return Ctx
-}
-
 export function flattenAll(children: ReactNode): ReactNode[] {
   const childrenArray = Children.toArray(children)
 
diff --git a/tasks/test-project/codemods/blogLayout.js b/tasks/test-project/codemods/blogLayout.js
index dce95bb574fc..596cfb0fe5db 100644
--- a/tasks/test-project/codemods/blogLayout.js
+++ b/tasks/test-project/codemods/blogLayout.js
@@ -15,48 +15,53 @@ return (
       <nav>
         <ul className="relative flex items-center font-light">
           <li>
-            <Link
+            <NavLink
               className="py-2 px-4 hover:bg-blue-600 transition duration-100 rounded"
+              activeClassName="py-2 px-4 hover:bg-blue-600 transition duration-100 rounded underline underline-offset-4"
               to={routes.about()}
             >
               About
-            </Link>
+            </NavLink>
           </li>
           <li>
-            <Link
+            <NavLink
               className="py-2 px-4 hover:bg-blue-600 transition duration-100 rounded"
+              activeClassName="py-2 px-4 hover:bg-blue-600 transition duration-100 rounded underline underline-offset-4"
               to={routes.contactUs()}
             >
               Contact Us
-            </Link>
+            </NavLink>
           </li>
           <li>
-            <Link
+            <NavLink
               className="py-2 px-4 hover:bg-blue-600 transition duration-100 rounded"
+              activeClassName="py-2 px-4 hover:bg-blue-600 transition duration-100 rounded underline underline-offset-4"
               to={routes.posts()}
             >
               Admin
-            </Link>
+            </NavLink>
           </li>
           {isAuthenticated && (
             <li>
-              <Link
+              <NavLink
                 className="py-2 px-4 hover:bg-blue-600 transition duration-100 rounded"
+                activeClassName="py-2 px-4 hover:bg-blue-600 transition duration-100 rounded underline underline-offset-4"
                 onClick={logOut}
                 to={''}
               >
                 Log Out
-              </Link>
+              </NavLink>
             </li>
           )}
           {!isAuthenticated && (
             <li>
-              <Link
+              <NavLink
                 className="py-2 px-4 hover:bg-blue-600 transition duration-100 rounded"
+                activeClassName="py-2 px-4 hover:bg-blue-600 transition duration-100 rounded underline underline-offset-4"
                 to={routes.login()}
               >
                 Log In
-              </Link>
+              </NavLink>
             </li>
           )}
         </ul>
@@ -76,6 +81,7 @@ export default (file, api) => {
   const routerImport = j.importDeclaration(
     [
       j.importSpecifier(j.identifier('Link'), j.identifier('Link')),
+      j.importSpecifier(j.identifier('NavLink'), j.identifier('NavLink')),
       j.importSpecifier(j.identifier('routes'), j.identifier('routes')),
     ],
     j.stringLiteral('@redwoodjs/router')