时间戳

首页 > 解决方案 > Next js - 每次更改路由时在服务器端调用一个函数

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

问题描述

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

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

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

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

标签： phpreactjsnext.jsserver-side-rendering

解决方案

您可以利用路由器的事件和自定义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;

推荐阅读