Gatsby/V5/Removal UseNavigate Hook

Last update

Sep 1, 2024

Removal of useNavigate Hook

This codemod updates your codebase by replacing the deprecated useNavigate hook from @gatsbyjs/reach-router with the navigate function from gatsby. This change is necessary for compatibility with React 18 and ensures that your application leverages the latest advancements in Gatsby.

Example

Before

import { useNavigate } from "@gatsbyjs/reach-router";

After

import { navigate } from "gatsby";

Before

import React from "react";
import { useNavigate } from "@gatsbyjs/reach-router";

export default function MyComponent() {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate('/about');
  };

  return < button onClick = { handleClick } > Go to About Page < /button>;
}

After

import React from "react";
import { navigate } from "gatsby";

export default function MyComponent() {
  const handleClick = () => {
    navigate('/about');
  };

  return < button onClick = { handleClick } > Go to About Page < /button>;
}

Removal of useNavigate Hook

Example

Before

import { useNavigate } from "@gatsbyjs/reach-router";

After

import { navigate } from "gatsby";

Before

import React from "react";
import { useNavigate } from "@gatsbyjs/reach-router";

export default function MyComponent() {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate('/about');
  };

  return < button onClick = { handleClick } > Go to About Page < /button>;
}

After

import React from "react";
import { navigate } from "gatsby";

export default function MyComponent() {
  const handleClick = () => {
    navigate('/about');
  };

  return < button onClick = { handleClick } > Go to About Page < /button>;
}

Build custom codemods

Use AI-powered codemod studio and automate undifferentiated tasks for yourself, colleagues or the community

Get Started Now