为什么 router.push 使用 next.js 重新加载/重新渲染页面？

Question

In my component, I have:

    return (
        <TouchableRipple onPress={() => router.push(`/conversations/${props.item.id}`)} style={{ marginBottom: 50 }}>
            <Surface style={{ height: 200, flex: 1, flexDirection: 'row', justifyContent: 'flex-start', borderRadius: customTheme.roundness, elevation: customTheme.elevation }}>

It goes to /conversations/1 , but rerenders the entire page. Am I missing something?

Answer 1

You need to provide 2 parameters to the push for it not to reload:

router.push(
  `/conversations/query-param=${props.item.id}`,
  `/conversations/${props.item.id}`
)

The query-param is the named parameter used in conversations

Answer 2

if you are using getInitialProps inside your conversations page, then it will refresh the page for you you need to use https://github.com/fridays/next-routes

Answer 3

I think the issue lies with the next router giving a new instance on every change. You probably have the following code:

const myPage = (props) => {
  const router = useRouter();
  
  return (...);

Essentially you are changing the router object as router.query now contains the updated url params. It seems that the router will give back a completely new instance of the router. Hence your functional component is updated because one of it's external dependencies changed. I too am looking for a solution to stop that behavior.

Quick fix: Move the expensive computations to a component and call that from your page. Then on your page add a quick cache to query (such as const routerPush = useMemo(() => router.push, []); and pass that into the component.

Answer 4

Did you try with brackets instead?

<TouchableRipple onPress={() => router.push(`/conversations/[props.item.id]`)} style={{ marginBottom: 50 }}>