将react-joyride与next-js一起使用

Question

next.js中有一个页面很少的应用程序，我想使用react-joyride进行应用程序游览，但是我无法弄清楚如何在进行游览时转到另一个页面，是否有可能用react-joyride改变路线？

每个目标都在不同的页面上。

import { useState } from "react";
import Navbar from "../components/Navbar";
import "../styles/globals.css";

import Joyride from "react-joyride";

function MyApp({ Component, pageProps }) {
  const [steps, setSteps] = useState([
    {
      title: "Main Title",
      target: ".main-content",
      content: "This is the main content header",
    },
    {
      target: ".main-heading",
      content: "This is the main heading",
    },
    {
      target: ".nav-trending",
      content: "Now click here",
    },
  ]);

  return (
    <>
      <Joyride
        run={true}
        scrollToFirstStep={true}
        showProgress={true}
        showSkipButton={true}
        steps={steps}
        continuous={true}
        styles={{
          options: {
            zIndex: 10000,
          },
        }}
      />
      <Navbar />
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;