Using single page anchor tags in Next.js to toggle content visibility

Question

Using single page anchor tags in Next.js to toggle content visibility

The Issue

Currently working on a project using Next.js and facing a challenge: needing to hide or replace content based on the selected category without reloading the page or navigating to another route. Furthermore, ensuring that when the page is reloaded (e.g. by pressing F5), the content remains unaffected.

Exploring Solutions

Upon exploring Next.js' showcase page, it seems possible through a feature called 'Shallow routing'. This allows for updating the URL without forcing a full reload of the page. This is what I have gathered so far. Any insights on how to dynamically update content based on category selection would be greatly appreciated!

Thank you in advance!

javascript css reactjs next.js

Answer 1

Answer №1

To dynamically load content on the client based on the category provided in the URL fragment (# value), you can utilize the window.location.hash property.

Below is a simple example demonstrating how this can be implemented:

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

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

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

    const changeCategory = (category) => {
        // Update URL fragment to trigger data fetching
        router.push(`/#${category}`, undefined, { shallow: true });
    }

    useEffect(() => {
        const someData = data[window.location.hash] ?? data.default // Retrieve content 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

Answer 2

To dynamically load content on the client based on the category provided in the URL fragment (# value), you can utilize the window.location.hash property.

Below is a simple example demonstrating how this can be implemented:

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

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

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

    const changeCategory = (category) => {
        // Update URL fragment to trigger data fetching
        router.push(`/#${category}`, undefined, { shallow: true });
    }

    useEffect(() => {
        const someData = data[window.location.hash] ?? data.default // Retrieve content 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

Using single page anchor tags in Next.js to toggle content visibility

The Issue

Exploring Solutions

Answer №1

Similar questions

"Troubleshooting the ineffectiveness of JavaScript's

Triggering a JavaScript function when a page is focused due to user interaction

Discovering objects on a JavaScript webpage using Selenium

Assign a value to the cookie based on the input from the form

Obtain the dimensions (width and height) of a collection of images using Angular and TypeScript

Utilizing React JS Styled-Components to Import Images from the Public Directory

saving user information with asynchronous HTTP calls

React-app size has grown larger post-deployment

SQL stores Array Input as a static identifier 'Array'

Initialize an array in React state using an initialization function that continuously updates the state using setState

Tips for verifying that input is provided in a text field when the checkbox is marked

Receiving a reply from the axios function

When attempting to install the necessary react JSX dependencies, the npm installation process encounters

Update all field values in Redux-form version 6.0 and above

Is there a way to rigorously validate my HTML, CSS, and JavaScript files against specific standards?

Incorporating multiple CSS style sheets within a single HTML document

Error message in Typescript: When a class has initialized properties, a 'super' call must be the first statement in the constructor

What is the best approach to transforming my jQuery function into CSS to ensure responsiveness?

What is the reason for sending a single file to the server?

What is the best way to incorporate a toggle feature for multiple elements in ReactJS so that clicking on an element displays a menu, and clicking outside of the menu hides