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

Question

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

在示例中，我有 2 个复选框，当我切换 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);

标签： reactjsnext.js

Answer 1

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

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);