如何在 url 更改但不替换 Next.js 中的整个页面时添加其他信息

Question

我是 Next.js 的新人，我需要你的帮助。我有一条名为“workPage”的路线，它有其他导航链接，点击后，我想向用户显示新信息以及“workPage”上的内容，但我不知道如何在 Next.js.在React.js，这真的很容易。有人可以帮我吗？下面的代码应该演示我想做什么。

这是工作页面组件

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>
)

}

我有另一个名为 WorkDetail 的组件

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

就是这样。单击 workPage 上的按钮时，URL 将为 /work/wiki ，我想显示 WorkDetail 组件以及 workPage[=18 上的内容=]

Answer 1

在 Next.js next/link is used for user navigation. next/router 用于编程路由或检索路由信息。

您还需要创建 pages that render your page specific components. Another helpful resource is the Next.js routing 页面。

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;

注意：next/link 需要一个空的锚标记作为子组件。

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;

Answer 2

更新：

您可以通过使用 Link component for updating the url and useState 在单击时显示 workDetail 组件来实现它。

    //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>
    )
    }

如果您需要一个按钮而不是 link ，请使用按钮组件包装它。

解决该问题的另一种方法是使用 .replaceState，但最不推荐。

因为您需要使用 .replaceState for updating the url and useState 在单击按钮时显示 workDetail 组件。

然后您的 workPage 组件应该如下所示：

    //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>
    )
    }

并且按钮被禁用，因为对于一个页面，详情页面应该加载一次。

注意：这两种方法都是假设 url 在按钮单击之前和按钮单击时是 /workPage url 应该是 /workPage/work/wiki.

如何在 url 更改但不替换 Next.js 中的整个页面时添加其他信息

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

routes

nested-routes

reactjs

next.js

更新：