My question is that I am doing data filtering using formik and I change the query of the URL when I submit the form and it worked. now the problem is that when I open a new tab in the browser and paste the URL with the queries in it the form value "the select element value" does not change according to the URL queries. I tried to debug it but I failed.
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>
);
}