Reactjs 如何设置nextjs路由器查询参数

我想知道如何在router.query中设置或取消设置参数

在本例中，我有两个复选框，当我切换a时，我希望查询值a切换，当我切换b时，我希望查询值b切换

以下是示例代码：

import { useState, useEffect } from "react";
import { withRouter } from "next/router";
import Layout from "../components/Layout";
const Test = ({ router }) => {
  const [query, setQuery] = useState(router.query);
  const changeQuery = val => e =>
    setQuery({ ...query, [val]: e.target.checked });
  const { a, b } = query;
  useEffect(() => {
    //what do I do here to set query param?
  }, [a, b]);
  return (
    <Layout>
      <pre>{JSON.stringify(router.query, undefined, 2)}</pre>
      a:
      <input
        type="checkbox"
        value="a"
        checked={a}
        onChange={changeQuery("a")}
      />
      b:
      <input
        type="checkbox"
        value="b"
        checked={b}
        onChange={changeQuery("b")}
      />
    </Layout>
  );
};
export default withRouter(Test);

从“react”导入{useState，useffect}；
从“下一个/路由器”导入{withRouter}；
从“./组件/布局”导入布局；
常量测试=（{router}）=>{
const[query，setQuery]=useState（router.query）；
常量changeQuery=val=>e=>
setQuery（{…query，[val]：e.target.checked}）；
常量{a，b}=query；
useffect（（）=>{
//我在这里做什么来设置查询参数？
}，[a，b]）；
返回(
{JSON.stringify（router.query，未定义，2）}
a:
b:
);
};
使用路由器导出默认值（测试）；

我可以使用router.push设置值，但不确定这是否是正确的方法：

从“下一个/路由器”导入{withRouter}；
从“../components/Layout”导入布局；
常量removeUndefined=o=>
对象。条目（o）
.filter（（[，val]）=>val！==未定义）
.reduce（（结果，[key，val]）=>{
结果[键]=val；
返回结果；
}, {});
常量测试=（{router}）=>{
const{pathname，query}=路由器；
常量{a，b}=query；
常量changeQuery=val=>e=>
路由器推送({
路径名，
查询：removeUndefined({
查询
[val]：e.target.checked？1:未定义，
}),
});
返回(
{JSON.stringify（查询，未定义，2）}
a:
b:
);
};
使用路由器导出默认值（测试）；

import { withRouter } from 'next/router';
import Layout from '../components/Layout';
const removeUndefined = o =>
  Object.entries(o)
    .filter(([, val]) => val!==undefined)
    .reduce((result, [key, val]) => {
      result[key] = val;
      return result;
    }, {});

const Test = ({ router }) => {
  const { pathname, query } = router;
  const { a, b } = query;
  const changeQuery = val => e =>
    router.push({
      pathname,
      query: removeUndefined({
        ...query,
        [val]: e.target.checked ? 1 : undefined,
      }),
    });
  return (
    <Layout>
      <pre>
        {JSON.stringify(query, undefined, 2)}
      </pre>
      a:
      <input
        type="checkbox"
        value="a"
        checked={a}
        onChange={changeQuery('a')}
      />
      b:
      <input
        type="checkbox"
        value="b"
        checked={b}
        onChange={changeQuery('b')}
      />
    </Layout>
  );
};
export default withRouter(Test);