jetstream inertia открывает ссылки в модальном окне

Question

Я скопировал из какого-то гит репозитория проект jetstream-inertia, только на react. В нём все компоненты переписаны с vue на react. И здесь все ссылки (Link и InertiaLink из `inertia-react) открываются в модальном окне. Если через консоль посмотреть, то это iframe

И я не понимаю, откуда берётся такое поведение. Вот код:

// app.tsx
import React from "react";
import {createRoot} from 'react-dom/client';
import {createInertiaApp} from "@inertiajs/inertia-react";

import Layout from "@/Layouts/Layout";
import {IPage} from "@/types/iPage";

createInertiaApp({
    resolve: (name: string) => {
        const page = require(`./Pages/${name}`).default;

        // Add default layout for all components
        (page as IPage).layout =
            page.layout || ((page) => <Layout children={page}/>);

        return page;
    },
    setup({el, App, props}) {
        const root = createRoot(el);
        root.render(<App {...props} />);
    },

});

// hooks/useRoute
import route, {Config, RouteParam, RouteParamsWithQueryOverload} from "ziggy-js";
import {Ziggy} from "@/ziggy";

const useRoute = () => {
    return (
        name?: string,
        params?: RouteParamsWithQueryOverload | RouteParam,
        absolute?: boolean,
        config: any = Ziggy
    ) => route(name, params, absolute, config);
}

export default useRoute;

// Layouts/Layout.tsx
import React, {useEffect, useState} from "react";
import {Inertia} from "@inertiajs/inertia";
import {Link, InertiaLink} from "@inertiajs/inertia-react";
import useRoute from "@/hooks/useRoute";

const Layout: React.FC<any> = (props) => {
    const route = useRoute();
    
    return (
        <div>
            <header>
                <InertiaLink href={route('home')}>Home</InertiaLink>
                <InertiaLink href={route('dashboard')}>Dashboard</InertiaLink>
                <InertiaLink href={route('myPage')}>My page</InertiaLink>
            </header>
            <main>
                {props.children}
            </main>
        </div>
    )
}

export default Layout

// Pages/MyPage.tsx
import React from "react";
import {IPage} from "@/types/IPage";

const MyPage: IPage = () => {
    return (
        <div>
           My Page
        </div>
    );
}

export default MyPage;

Я посмотрел примеры сайтов на inertiaJS - https://laracasts.com/ - здесь тоже ссылки открываются в iframe. Это очень странно.

Пока единственное решение, которое я нашел, это добавлять атрибут as="button" для InertiaLink:

export default function CLink({
    href,
    children,
    className
}: PropsWithChildren<Props>) {
    return (
        <InertiaLink href={href} className={className} >
            {children}
        </InertiaLink>
    );
}

Answer 1

По идее, дело не во фронте, а в бэке. Эндпоинты (роуты, методы контроллеров), на которые ссылаются InertialLink должны отдавать Inertia::render.

БЛОГ НА HUSL

jetstream inertia открывает ссылки в модальном окне

Ответы (1 шт):