php - Next js - 每次更改路由时在服务器端调用一个函数

Question

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

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

对于改变路线，我使用 Link的 next-routes , 仅对客户端有影响。

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

Answer 1

您可以利用 Router's events和 Custom App 观察路线变化并执行您需要的操作。您可以在下面找到两种示例实现，一种使用类组件，一种使用钩子(Hook)。两者都应该做到这一点。

// 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;