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

Answer 1

我可以使用router.push来设置值，但不确定是否能正确地做到这一点：

       SizedBox(
          child: FlareActor(
            "assets/animations/finding-pizza.flr",
            alignment: Alignment(MediaQuery.of(context).size.width * 0.8,
              MediaQuery.of(context).size.height * 0.8,),
            fit: BoxFit.contain,
            animation: _animationName,
          ),
        ),

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

1 个答案: