# React Router

## React Router's Prefetching[​](#react-routers-prefetching "Direct link to React Router's Prefetching")

React Router DOM (v6.4+) uses no prefetching by default. While you can enable prefetching with options like `intent` (hover/focus) or `viewport`, it doesn't have the same flexibility as ForesightJS. To add ForesightJS to React Router you can wrap the `Link` component.

## ForesightLink Component[​](#foresightlink-component "Direct link to ForesightLink Component")

Below is a wrapper around the React Router `Link` that prefetches with ForesightJS using the [`useForesight`](/docs/react/useForesight.md) hook. The callback flips a flag that renders `PrefetchPageLinks` for the target route. On mobile devices ForesightJS falls back to the configured [`touchDeviceStrategy`](/docs/react/configuration/global-settings.md#touch-device-settings).

```
import { useForesight, type ForesightRegisterOptionsWithoutElement } from "@foresightjs/react"
import { useState } from "react"
import { Link, PrefetchPageLinks, type LinkProps } from "react-router"

interface ForesightLinkProps
  extends Omit<LinkProps, "prefetch">, Omit<ForesightRegisterOptionsWithoutElement, "callback"> {
  children: React.ReactNode
  className?: string
}

export function ForesightLink({
  children,
  className,
  hitSlop,
  name,
  meta,
  reactivateAfter,
  enabled,
  ...props
}: ForesightLinkProps) {
  const [shouldPrefetch, setShouldPrefetch] = useState(false)
  const { elementRef } = useForesight<HTMLAnchorElement>({
    callback: () => setShouldPrefetch(true),
    hitSlop,
    name,
    meta,
    reactivateAfter,
    enabled,
  })

  return (
    <>
      {shouldPrefetch && <PrefetchPageLinks page={props.to.toString()} />}
      <Link {...props} ref={elementRef} className={className}>
        {children}
      </Link>
    </>
  )
}
```

### Usage of ForesightLink[​](#usage-of-foresightlink "Direct link to Usage of ForesightLink")

```
export function Navigation() {
  return (
    <>
      <ForesightLink to={"/contact"} hitSlop={20} name="contact-link">
        contact
      </ForesightLink>
      <ForesightLink to={"/about"} name="about-link">
        about
      </ForesightLink>
    </>
  )
}
```