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

背景

我想建立一个网页，每当我改变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

从“React”导入React
从“下一个/链接”导入链接
常量示例=（）=>{
返回(
例子
数值
)
}
导出默认示例

问题

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

谢谢你的帮助

使用

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

您将通过（由或添加）接收更新的

路径名

和

查询

，而不会丢失状态

要启用浅路由，请将

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

//pages/[index].js
从“react”导入{useEffect}
从“下一个/路由器”导入{useRouter}
导出默认函数索引（）{
const router=useRouter（）
返回(
router.push（'/？value=1'，未定义，{shallow:true}）}>
值1
router.push（'/？value=2'，未定义，{shallow:true}）}>
价值2
{router.query.value}
)
}

您应该使用为查询属性命名的页面文件-

pages/[param].tsx

。据我所知，在这种情况下，任何路由

value1

/

value2

将由相同的文件处理，并将作为

router.query.param