I'm trying to get foo param value from http://localhost:3000/params?foo=123
But I'm getting this error:
Error: Params(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
Why?
import { BrowserRouter as Router, useLocation } from "react-router-dom";
import React from "react";
export function useQuery() {
return new URLSearchParams(useLocation().search);
}
export function QueryScreen() {
let query = useQuery();
return (
<>
<h1>{query.get("foo")}</h1>;
</>
);
}
export default function Params() {
<Router>
<QueryScreen />
</Router>;
}
Done! This snippet solved my problem:
import { useRouter } from "next/router";
export default function Items(props) {
const { query } = useRouter();
return (
<div>
<h1>{query.foo}</h1>
</div>
);
}