Avoid re-render on dynamic route shallow routing
Unanswered
Cape lion posted this in #help-forum
Cape lionOP
onClick={() => replace(`/contracts/${contractId}/settings`, undefined, { shallow: true })}attempting to pass
shallow option to either push/replace from Next router is still causing the page to re-render every time. not sure if this is possible. currently on "next": "14.1.0",.also curious if there is a value in the
router object that would return the full path with no query params appened(asPath does return the path with params).8 Replies
Cape lionOP
the
/settings is a dynamic value in that URL I'd like to update without re-render the page@Cape lion
use router
import {useRouter} from "next/navigation"
const router = useRouter();
router.push("...")
it will do shallow routing automatically
@Cape lion javascript
onClick={() => replace(`/contracts/${contractId}/settings`, undefined, { shallow: true })}
attempting to pass `shallow` option to either `push/replace` from Next router is still causing the page to re-render every time. not sure if this is possible. currently on `"next": "14.1.0",`.
also curious if there is a value in the `router` object that would return the full path with no query params appened(`asPath` does return the path with params).
if you use the app router then
shallow: true is no longer a thing. instead use https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating#using-the-native-history-api