qc-xjqxz-retro/src/layout/index.tsx

import React, { useContext, useEffect, useState } from "react"
import './index.less'
import gameIcon from '../assets/favicon.ico'
import { Link, useLocation } from "react-router-dom"
import { DispatchApp } from "../App";

const noShow = ['/gameIntroduction', '/systemIntroduction', '/gameplayIntroduction', '/commonInformation']

interface Props {
    children?: React.ReactNode;
}
const Layout: React.FC<Props> = ({ children }) => {

    /************************************/
    const location = useLocation();  // 获取当前路由位置
    const { scrollY, scrollDirection } = useContext(DispatchApp)!;
    const [active, setActive] = useState<boolean>(false)
    /************************************/

    useEffect(() => {
        const bodyHeader = document.getElementById('bodyHeader');
        if (noShow.includes(location.pathname)) {
            if (scrollDirection === 'down' && scrollY > 200) {
                bodyHeader?.classList.add('notshow');
            } else {
                bodyHeader?.classList.remove('notshow');
            }
        } else {
            bodyHeader?.classList?.remove('notshow')
        }
    }, [scrollY, scrollDirection, location])

    return <>
        <header id="bodyHeader">
            <div className='header-box'>
                <img className="game-icon" src={gameIcon} alt="" />
                <div className="game-title"></div>
                <div className={`btn-menu ${active ? 'active' : ''}`} onClick={() => { setActive(!active) }}></div>
            </div>
            <ul className={`${active ? 'active' : ''}`} onClick={() => {
                setActive(!active)
                window.scrollTo({ top: 0 })
            }}>
                <li><Link to="/">官网首页</Link></li>
                <li><Link to="/gameIntroduction">游戏介绍</Link></li>
                <li><Link to="/systemIntroduction">系统介绍</Link></li>
                <li><Link to="/gameplayIntroduction">玩法介绍</Link></li>
                <li><Link to="/commonInformation">常用信息</Link></li>
                <li><Link to="/news">新闻中心</Link></li>
                <li><Link to="/strategy">游戏攻略</Link></li>
            </ul>
        </header>
        {/* 主内容 */}
        {children}
        <footer>
            <a style={{ opacity: 0, height: 0, overflow: 'hidden' }}></a>
            <div className="inner">
                <div className="copyright-con">
                    <p>
                        <a href="https://xjqxz.gaeamobile.net/privacy.html" target="_blank">隐私政策</a>
                        |
                        <a href="https://xjqxz.gaeamobile.net/service.html" target="_blank">用户服务协议</a>
                        |
                        <a href="https://xjqxz.gaeamobile.net/childProtection.html" target="_blank">儿童个人信息保护及监护人须知</a></p>
                    <p>温馨提示：本游戏产品适合16岁(含)以上用户</p>
                    <p>
                        <a href="http://beian.miit.gov.cn/">粤ICP备14092178号-1</a> |
                        <a href="https://image.gaeamobile.net/image/20210617/172839/GAEAICP.pdf" target="_blank">粤B2-20160276</a>
                        |
                        <a href="https://beian.miit.gov.cn/#/Integrated/index">粤ICP备14092178号-20A</a>
                    </p>
                    <p>著作权人：天津帕格索斯网络科技有限公司</p>
                    <p>
                        新广出审[2016]1432 | ISBN 978-7-7979-0252-6
                        |
                        <a href="http://sq.ccm.gov.cn:80/ccnt/sczr/service/business/emark/gameNetTag/4028c08c54dc801e0154dcac5eec0532" target="_blank">
                            文网游进字[2016]0073号
                            <img src="https://image.gaeamobile.net/image/20180712/141506/1.png" alt="" className="wen" />
                        </a>
                    </p>
                    <p>出版单位：北京伯通电子出版社</p>
                    <p>客服邮箱：kf-service@gaea.com</p>
                    <p>健康游戏忠告：抵制不良游戏，拒绝盗版游戏。注意自我保护，谨防受骗上当。适度游戏益脑，沉迷游戏伤身。合理安排时间，享受健康生活。</p>
                </div>
            </div>
        </footer>
    </>
}

export default React.memo(Layout)