Next.js Discord

Discord Forum

router.push not pushing with params

Unanswered
Scottish Deerhound posted this in #help-forum
Open in Discord
Scottish DeerhoundOP
Title: I have the following code but i don't think its the issue,
const handleSearch = (e: React.FormEvent<HTMLFormElement>) => {
    const route = pathname + (searchQuery ? `?q=${searchQuery}` : "");
    console.log("Pushing to " + route);
    router.push(route);
  };
The correct directory is outputted to the console, however the router only redirects me to /? with no params just question mark (also in picture) not sure whats wrong here, since if i manually type the query parameters it works fine and does not redirect me

9 Replies

Dunker
use template literal instead, like:
const route = pathname + (searchQuery && `${pathname}?q=${searchQuery}`)
Dunker
also router.push(url: string), so you can do
route.toString()
riský
i think it may not like the slash before ?... (but idk)
Scottish DeerhoundOP
I tried `${pathname}?q=${searchQuery};` but it seems to send it to server side correctly, but then it sits there for like 30 seconds and says the render was aborted without reason and just loads the page with just ?
 ⨯ Internal error: Error: The render was aborted by the server without a reason.
    at eG (node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:11:279156)
    at Object.cancel (node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:11:292152)
    at readableByteStreamControllerCancelSteps (node:internal/webstreams/readablestream:3020:37)
    at [kCancel] (node:internal/webstreams/readablestream:1164:12)
    at ensureIsPromise (node:internal/webstreams/util:192:19)
    at readableStreamCancel (node:internal/webstreams/readablestream:1885:5)
    at node:internal/webstreams/readablestream:1437:15
    at complete (node:internal/webstreams/readablestream:1321:9)
    at shutdownWithAnAction (node:internal/webstreams/readablestream:1317:5)
    at node:internal/webstreams/readablestream:1436:14
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
Now it also seems it ran out of memory... but i think thats unrelated
Also this error but in browser console:
Failed to fetch RSC payload. Falling back to browser navigation. TypeError: Failed to fetch at fetchServerResponsekinda confused on why manually typing works, but code doesnt
Scottish DeerhoundOP
Another update i removed all my code and just return a blank page with query params, but it seems the params are recieved on the serverside, but for some reason browser just goes to base path with just ?
the console error is still there