nextjs router update on URL parameter change - reactjs

Question

I have a Header component which updates url parameters to make an api call, and uses next router to pass these parameters to the results page.
I want to be able to search again from this page using router, but the page does not refresh due to the results page being the same.
How can I acheive this?
Many thanks for any help, code below.
Header.js
import { useState, useEffect, useContext } from "react";
import { useRouter } from "next/router";
export default function Header() {
const [searchText, setSearchText] = useState("");
const [impact, setImpact] = useState("");
const [worldwide, setWorldwide] = useState(false);
const router = useRouter();
const onClick = (e) => {
setWorldwide(e.target.checked);
};
const handleSubmit = (event) => {
event.preventDefault();
setImpact(impact);
let remote = "";
if (worldwide === true) {
remote = "Remote";
} else {
remote = "";
}
router.push({
pathname: `/remote-jobs`,
query: {
term: `${searchText}`,
impact: `${impact}`,
location: `${remote}`,
},
});
};
return (
<div>
<div className="p-4 flex flex-col items-center justify-center w-1/3 md:w-full">
<form onSubmit={handleSubmit}>
<select
onChange={(e) => setImpact(e.target.value)}
className="pl-2 pr-2 mr-4 h-10 rounded bg-white text-black md:h-12 md:pl-4 md:pr-4"
>
<option value="">choose an option</option>
<option value="sdg1">option1</option>
<option value="sdg2">option2</option>
</select>
<input
placeholder={"search"}
className="pl-2 pr-2 h-10 my-2 rounded bg-white text-black md:h-12 md:pl-4 md:pr-4"
onChange={(event) => {
setSearchText(event.target.value);
}}
/>
<button className="ml-4 pl-2 pr-2 rounded bg-black text-white md:h-12 md:pl-4 md:pr-4">
Go
</button>
<input
className="ml-4"
type="checkbox"
onClick={onClick}
value={!worldwide}
/>{" "}
</form>
</div>
</div>
</div>
);
}
Results page:
import React, { useState, useEffect } from "react";
import Job from "../components/Job";
import Header from "../components/Header";
export default function App(key) {
const [jobs, setJobs] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
const urlParams = new URLSearchParams(window.location.search);
const searchTerm = urlParams.get("term");
const searchImpact = urlParams.get("impact");
const searchLocation = urlParams.get("location");
const fetchJobs = async () => {
const url = `https://api.app/api/search?term=${searchTerm}&impact=${searchImpact}&location=${searchLocation}`;
const response = await fetch(url);
const info = await response.json();
setLoading(false);
setJobs(info);
};
fetchJobs();
}, []);
return (
<div className="App">
<Header />
{loading ? (
<div>...loading</div>
) : (
<div>
{jobs.length} jobs
<div>
{jobs.map((job) => (
<Job job={job} key={job.id} />
))}
</div>
</div>
)}
</div>
);
}

Answer 1

You should use next router to get the query values and then you can useEffect to fetch new data whenever the query changes
export default function App(key) {
const [jobs, setJobs] = useState([]);
const [loading, setLoading] = useState(true);
const { query: { term, impact, location } } = useRouter();
useEffect(() => {
const fetchJobs = async () => {
const url = `https://api.app/api/search?term=${term}&impact=${impact}&location=${location}`;
const response = await fetch(url);
const info = await response.json();
setLoading(false);
setJobs(info);
};
fetchJobs();
}, [term, impact, location]);
return (
<div className="App">
<Header />
{loading ? (
<div>...loading</div>
) : (
<div>
{jobs.length} jobs
<div>
{jobs.map((job) => (
<Job job={job} key={job.id} />
))}
</div>
</div>
)}
</div>
);
}