Next js - 每次更改路由时调用服务器端的函数

Question

我正在将旧堆栈移至下一个 js，我需要一些帮助。

我有一个 php 后端，每次更改路由时我想从该后端检查控制器，并且我想在服务器端执行此操作。

为了改变路线，我使用Link了next-routes，它只对客户端有效。

有什么方法可以在不刷新应用程序的情况下调用服务器端的控制器吗？

Answer 1

您可以利用路由器的事件和自定义App监视路由更改并执行您需要的操作。您可以在下面找到两种示例实现，一种使用类组件，一种使用钩子。两者都应该做到这一点。

// class component
import NextApp from 'next/app';
import Router from 'next/router';

class App extends NextApp {
  componentDidMount() { 
    Router.events.on('routeChangeStart', () => {
      // call to your backend
    });
  }

  render() {
    const { Component, pageProps } = this.props;

    return <Component {...pageProps} />;
  }
}

export default App;

// using hooks
import Router from 'next/router';

const App = ({ Component, pageProps }) => {
  React.useEffect(() => {
    const doMagic = () => {
      // do your thing
    }

    Router.events.on('routeChangeStart', doMagic); // add listener

    return () => {
      Router.events.off('routeChangeStart', doMagic); // remove listener
    } 
  }, []);

  return <Component {...pageProps} />;
}

export default App;