如何使用同一页面锚标签隐藏/显示 Next.js 中的内容

Question

问题

当前项目使用 Next.js 出现这种情况：需要隐藏或替换内容，匹配当前选择的类别。 我想在不重新加载或使用其他路线的情况下这样做。 当用户按下 F5 或重新加载页面时，内容保持不变。

尝试

Next.js 的展示页面显然能够做到这一点。 在文档中，有一个名为“浅路由”的功能，它基本上可以在不重新加载页面的情况下更新 URL。 这就是我现在想出来的。 关于如何更改内容以匹配类别的任何线索？

谢谢！

Answer 1

您可以使用window.location.hash根据 URL 片段（ #值）中传递的类别在客户端加载内容。

这是一个如何实现这一目标的最小示例。

import React, { useState, useEffect } from 'react'

const data = {
    '#news': 'News Data',
    '#marketing': 'Marketing Data',
    default: "Default Data"
}

const ShowCasePage = () => {
    const router = useRouter()
    const [categoryData, setCategoryData] = useState()

    const changeCategory = (category) => {
        // Trigger fragment change to fetch the new data
        router.push(`/#${category}`, undefined, { shallow: true });
    }

    useEffect(() => {
        const someData = data[window.location.hash] ?? data.default // Retrieve data based on URL fragment
        setCategoryData(someData);
    }, [router])

    return (
        <>
            <div>Showcase Page</div>
            <button onClick={() => changeCategory('news')}>News</button>
            <button onClick={() => changeCategory('marketing')}>Marketing</button>
            <div>{categoryData}</div>
        </>
    )
}

export default ShowCasePage