0

我正在使用 Inertia 创建 React & Laravel 网站。Inertia Link 组件弹出访问页面的堆栈，而不是按预期呈现页面。可能是什么问题？

最初它工作得很好。这是我的 Header 组件。

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