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

Question

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

我有一个 php 后端，每次更改路由时我都想从这个后端检查控制器，我想在服务器端进行。

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

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

Answer 1

您可以利用 Router's events and Custom App 观察路线变化并执行您需要的操作。您可以在下面找到两个示例实现，一个使用 class 组件，一个使用挂钩。两者都应该可以解决问题。

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

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

Next js - Call a function on server side each time a route is changed

php

reactjs

server-side-rendering

next.js