How does <Component {...pageProps} /> function?

Question

newbie here,

The code Im learning from this and I also find almost every _app.js have this line code too.

class Name extends App {
 render() {
    const { Component, pageProps } = this.props;
    const config = { some config here };
    return (
        <AppProvider config = { config }>
          <Component {...pageProps} />
        </AppProvider>
    );
  }
}

I know that <Component {...pageProps} /> part represents all other pages. And when I navigate page it change in pageprops.

It just I don't know how it call other page?

Answer 1

Component is provided as a prop from whichever component is calling Name (lets call it Foo).

As you mentioned that navigation changes props, I am assuming that when page is navigated, this Foo undergoes some change and hence passes a different Component and/or pageProps to Name. Hence the Component instance in the new page gets new props.

If you want to call it in other pages, check how it has been passed from Foo and follow the same method in your component.