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

Sean W · Answer 1 · 2021-11-16T06:30:16.027

0

In Next.js next/link is used for user navigation. next/router is used for programmatic routing or to retrieve route information.

You also need to create pages that render your page specific components. Another helpful resource is the Next.js routing page.

pages/work/index.js

import Link from "next/link";

const WorkPage = () => (  
 <Link href="/work/wiki">
  <a>Go to work/wiki</a>
 </Link>
)

export default WorkPage;

Note: next/link requires an empty anchor tag as a child component.

pages/work/wiki.js

import YourWorkDetailComponent from '../path/to/component';

const WikiPage = () => (
 <>
  <Link href="/work">
   <a>Go to work</a>
  </Link>
  <YourWorkDetailComponent />
 </>
);

export default WikiPage;

edited Nov 16 '21 at 06:30

answered Nov 16 '21 at 06:19

Sean W

5,663
18
31

But I doubt if this would help him. He didn't wanna load wiki page instead, he wanna add content of wiki page to work page. So its not for unloading and loading, its like appending content, with a URL update – Mathews Sunny Nov 16 '21 at 06:39
You may be correct in the OP's intention. I interpreted the question as the OP wants to use a layout-style or tab-style routing. The approach outlined above is a minimal version of a more traditional approach that allows the content to be accessed directly via wiki and wiki/page URLs. The shared data should extracted into a layout or tab component – but this portion is beyond the scope of this question. Typically in Next.js you use the useRouter hook to change routes programmatically. Directly using window.history/location should be avoided to promote consistency within a Next application. – Sean W Nov 16 '21 at 15:29

Mathews Sunny · Accepted Answer · 2021-11-17T04:12:12.490

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.

For Next.js apps it's recommended to use the built-in router, which in this case means using [`router.replace`](https://nextjs.org/docs/api-reference/next/router#routerreplace) instead of `window.history.replaceState`. — juliomalves, Nov 16 '21 at 19:49
Hi @juliomalves, but if we use replace instead of replace it will rerender the path. But after considering your suggestion, I think we can go for another solution. I will update the answer soon. Thanks for your proposal. — Mathews Sunny, Nov 17 '21 at 03:40

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

2 Answers2

UPDATE :