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

Question

背景

我想构建一个网页，每当我将 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，我想知道如何使用这个工具来做这样的事情。

感谢您的任何帮助！

Answer 1

使用Next.js 浅层路由。

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

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

要启用浅层路由，请将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>
    </>
  )
}