使用nextjs切换页面时如何只更改一个组件？

Posted 2023-02-22

【中文标题】使用nextjs切换页面时如何只更改一个组件？

【英文标题】：How to change only one component when switching pages with nextjs?

【发布时间】：2019-12-24 19:04:53

【问题描述】：

背景

我想建立一个网页，每当我将 url 更改为另一个路径时，它都不会触发导航，我的意思是，它不会再次加载页面；相反，我希望此 url 更改以更改页面中一个组件“x”的属性。根据 url 路径，它会导致组件“x”加载不同的属性；

代码示例

在下面的示例中，根据单击的链接，它会在空段落行上显示不同的值：如果 url 路径只是“/”，它应该是空的，但如果我单击链接 1 它应该在段落上显示“value1”，如果我点击链接 2，它应该显示“value2”。在这两种情况下，我都不想触发导航，我只想更改 url 并且段落上的值也相应更改。

import React from 'react'
import Link from 'next/Link'


const example = ()=>
    return(
    <div>
        <div>   
        <h1>Example</h1>
        <Link href='/value1'><a>Link 1</a></Link>
        <Link href='/value2'><a>Link 2</a></Link>
        </div>
        <div>
         <p> Value <p>
        </div>
    </div>
    )


export default example

问题

如何使用 NextJS 做到这一点？我知道有浅路由，但根据我在这个问题上发现的https://github.com/zeit/next.js/issues/3253 没有确定的方法...... 我知道可以使用 react-router 来完成，但是为了学习 nextJS，我想知道如何使用这个工具来做这样的事情。

感谢您的帮助！

【问题讨论】：

您应该使用为查询属性命名的页面文件 - pages/[param].tsx。据我了解，任何路线value1/value2 在这种情况下都将由同一个文件处理，并将作为router.query.param

传递

【参考方案1】：

使用Next.js Shallow Routing。

浅路由允许您更改 URL 而无需再次运行数据获取方法，包括 getServerSideProps、getStaticProps 和 getInitialProps。

您将通过router object（由useRouter 或withRouter 添加）收到更新后的pathname 和query，而不会丢失状态。

要启用浅层路由，请将shallow 选项设置为true。

---

应用于您的示例：

// pages/[index].js

import  useEffect  from 'react'
import  useRouter  from 'next/router'

export default function Index() 
  const router = useRouter()

  return (
    <>
      <a onClick=() => router.push('/?value=1', undefined,  shallow: true )>
        Value 1
      </a>

      <a onClick=() => router.push('/?value=2', undefined,  shallow: true )>
        Value 2
      </a>

      <p> router.query.value <p>
    </>
  )