0

Inertia を使用して React & Laravel Web サイトを作成しています。Inertia Link コンポーネントは、ページを期待どおりにレンダリングするのではなく、アクセスしたページのスタックをポップアップ表示します。問題は何ですか？

最初は問題なく動作しました。これが私のヘッダーコンポーネントです。

import React, { useState } from "react";
import { Link } from "@inertiajs/inertia-react";
import MenuIcon from "@mui/icons-material/Menu";
import CloseIcon from "@mui/icons-material/Close";

import logo from "../../../../../public/images/zawadiz.png";

import "./Header.css";

const Header = () => {
    const [showMobileMenu, setShowMobile] = useState(false);
    return (
        <header>
            <div className="container">
                <Link href="/" className="brand">
                    <img src={logo} alt="" className="logo" width={130} />
                </Link>
                <div
                    className="menu"
                    style={{
                        right: showMobileMenu ? 0 : "-100%",
                        transition: "all .5s ease",
                    }}
                >
                    <Link href="/">Home</Link>
                    <Link href="/about">About</Link>
                    <Link href="/services">Services</Link>
                    <Link href="/products">Products</Link>
                    <Link href="/contact">Contact</Link>
                </div>

                <div className="menu-icon">
                    {showMobileMenu ? (
                        <CloseIcon
                            onClick={() => setShowMobile(!showMobileMenu)}
                        />
                    ) : (
                        <MenuIcon
                            onClick={() => setShowMobile(!showMobileMenu)}
                        />
                    )}
                </div>
            </div>
        </header>
    );
};

export default Header;

app.blade.php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
        <link rel="icon" type="image/svg+xml" href="../../public/images/favicon.png" />
        <link href="{{ mix('/css/app.css') }}" rel="stylesheet" />
        <script src="{{ mix('/js/app.js') }}" defer></script>
        @inertiaHead
    </head>
    <body>
        @inertia
    </body>
</html>

発生した動作については、以下のスクリーンショットを参照してください。

ここに画像の説明を入力

前もって感謝します。

4

0 に答える 0