如何在Next.js中保持左右组件状态与滚动条进度，同时刷新中间组件？

Question

nextjs app 我从/token/1 跳转到/token/2 ,我想左右俩边的组件state和滚动条进度都不变，但中间组件刷新，这要怎么实现？

"use client";
import { Button } from "@mui/material";
import { useState } from "react";

export default function Layout({ children }: { children: React.ReactNode }) {
  const [data, setdata] = useState("second");
  return (
    <div>
      <Button onClick={() => setdata("first")}>{data}</Button>
      children: {children}
    </div>
  );
}

"use client";
import { Button } from "@mui/material";
import Link from "next/link";
import { useState } from "react";

export default function Page() {
  const [data, setdata] = useState("second");
  return (
    <div>
      <Button onClick={() => setdata("first")}>{data}</Button>
      <Link href={"/test/1"} replace shallow={false}>
        test1
      </Link>
      <Link href={"/test/2"} replace shallow={false}>
        test2
      </Link>
    </div>
  );
}