浏览器后退按钮到 go 回到特定路线

Question

I am on a certain link when I click on the browser back button I want to send it back to the homepage which is the "/" route. How can I implement this feature in Next.js?

Answer 1

Here is an example of how you can do this:

import { useEffect } from "react";
import { Router } from "next/router";

function Page() {
  useEffect(() => {
    const handleBackButton = () => {
      Router.push("/");
    };

    window.addEventListener("popstate", handleBackButton);
    return () => {
      window.removeEventListener("popstate", handleBackButton);
    };
  }, []);

  // Render your page content here
}

export default Page;

This code uses the useEffect hook to attach an event listener to the popstate event, which is fired when the user navigates the browser history. The event listener calls the Router.push function from the next/router module, which navigates the user to the specified route (in this case, the homepage at the "/" route).