How to add additional information when the url changes but not replacing the entire page in Next.js

Question

I am new at Next.js and I need your help. I have a route called "workPage" which has other nav links and upon being clicked, I want to show users new information along with the content on "workPage", but I don't know how that can be achieved in Next.js. In React.js, it's really easy. Can someone help me here, please? The below code should demonstrate what I want to do.

This is the workPage component

import { useRouter } from "next/router";

const WorkPage =()=> {
   const {push} =useRouter()
 const navigateHandler =()=> {
   push(`/work/wiki`)
}

return (
  <div>
      <h1>This is Work Page.</h1>
      <p>Content of work page.</p>
      <button onClick={navigateHandler}>Go to work/wiki</button>
  </div>
)

}

I have another component called WorkDetail

const WorkDetail =()=> {
 return (
  <div>
   <h1>This is Work Detail Page.</h1>
 </div>
)
}

This is it. When the button on workPage gets clicked, the URL will be /work/wiki and I want to show the WorkDetail component along with the content on workPage

Answer 1

UPDATE :

You could achieve it, by using the Link component for updating the url and useState for displaying the workDetail component upon click.

    //import { useRouter } from "next/router";
    import { useState } from "react";
    import Link from "next/link";

    const WorkPage =()=> {
       //const {push} =useRouter();
       const [wikiDisplay, setWikiDisplay] = useState(false);
      const navigateHandler = () => {
        setWikiDisplay(true);
      };

    return (
      <div>
          <h1>This is Work Page.</h1>
          <p>Content of work page.</p>
          <Link href='/workPage' as='/workPage/work/wiki' ><a onClick={navigateHandler}>Furniture</a></Link>
          {wikiDisplay && <WorkDetail>}
      </div>
    )
    }

and if you need a button instead of a link , wrap it using a button component.

 

Another work around for the problem is using .replaceState, but is least recommended.

In that you need to use the .replaceState for updating the url and useState for displaying the workDetail component upon button click.

and then your workPage component should look like this :

    //import { useRouter } from "next/router";
    import { useState } from "react";

    const WorkPage =()=> {
       //const {push} =useRouter();
       const [wikiDisplay, setWikiDisplay] = useState(false);
      const navigateHandler = () => {
        window.history.replaceState(null, "", "workPage/work/wiki");
        setWikiDisplay(true);
      };

    return (
      <div>
          <h1>This is Work Page.</h1>
          <p>Content of work page.</p>
          <button onClick={navigateHandler} disabled={wikiDisplay}>Go to work/wiki</button>
          {wikiDisplay && <WorkDetail>}
      </div>
    )
    }

and button is disabled since for a page, detail page should be loaded once.

Note : Both the approach is by assuming that the url is /workPage before button click and upon button click the url should be /workPage/work/wiki.