Mi pregunta es que estoy filtrando datos usando formik y cambio la consulta de la URL cuando envío el formulario y funcionó. ahora el problema es que cuando abro una nueva pestaña en el navegador y pego la URL con las consultas, el valor del formulario "el valor del elemento seleccionado" no cambia de acuerdo con las consultas de la URL. Intenté depurarlo pero fallé.
import Head from "next/head"; import { Formik, Field, Form } from "formik"; import router, { useRouter } from "next/router"; import { useState, useEffect } from "react"; export default function Home() { const { query } = useRouter(); const [initialValues, setInitialValues] = useState({ categories: query.categories || "all-categories", color: query.color || "all-color", size: query.size || "all-size", }); return ( <div> <Head> <title>Create Next App</title> <meta name="description" content="Generated by create next app" /> </Head> <Formik initialValues={initialValues} onSubmit={(values) => { router.push({ pathname: "/", query: values }, undefined, { shallow: true, }); }} > <Form> <Field label="categories" as="select" name="categories"> <option value="all-categories">get all</option> <option value="electronics">electronics</option> <option value="jewelery">jewelery</option> <option value="men-clothing">men's clothing</option> <option value="women-clothing">women's clothing</option> </Field> <Field label="categories" as="select" name="color"> <option value="all color">all color</option> <option value="red">Red</option> <option value="black">Black</option> <option value="white">White</option> </Field> <Field label="size" as="select" name="size"> <option value="all-size">all size</option> <option value="s">S</option> <option value="m">M</option> <option value="l">L</option> <option value="xl">XL</option> </Field> <button type="submit">Submit</button> </Form> ); </Formik> </div> ); }