where is the navigate method? (for nextui)

[kjjd84]

nextui allows us to specify the navigation method for integrating with client side routers:

https://nextui.org/docs/guide/routing

for example, with react router, you'd use:

import {BrowserRouter, useNavigate, useHref} from 'react-router-dom';
import {NextUIProvider} from '@nextui-org/react';

function App() {
  const navigate = useNavigate();

  return (
    <NextUIProvider navigate={navigate} useHref={useHref}>
      {/* Your app here... */}
      <Routes>
        <Route path="/" element={<HomePage />} />
        {/* ... */}
      </Routes>
    </NextUIProvider>
  );
}

what is the equivalent of this useNavigate hook with inertia?

i asked chatgpt, does this look correct:

import React from "react";
import { createInertiaApp } from "@inertiajs/inertia-react";
import { NextUIProvider } from "@nextui-org/react";
import { InertiaProgress } from "@inertiajs/progress";
import { Inertia } from "@inertiajs/inertia";

createInertiaApp({
  resolve: (name) => require(`./Pages/${name}`).default,
  setup({ el, App, props }) {
    React.render(
      <NextUIProvider
        navigate={(to, options = {}) => Inertia.visit(to, options)}
        useHref={(to) => to} // simply return the 'to' since Inertia doesn't need path transformation
      >
        <App {...props} />
      </NextUIProvider>,
      el
    );
  },
});

InertiaProgress.init();

[kjjd84]

i got it:

import { createInertiaApp, router } from "@inertiajs/react";
import { NextUIProvider } from "@nextui-org/react";
import { createRoot } from "react-dom/client";

createInertiaApp({
    resolve: (name) => {
        const pages = import.meta.glob("./Pages/**/*.jsx", { eager: true });
        return pages[`./Pages/${name}.jsx`];
    },
    setup({ el, App, props }) {
        createRoot(el).render(
            <NextUIProvider navigate={(path) => router.visit(path)}>
                <App {...props} />
            </NextUIProvider>
        );
    },
});