Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/22.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Php 下一个js-每次更改路由时在服务器端调用一个函数_Php_Reactjs_Next.js_Server Side Rendering_Next - Fatal编程技术网

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

Php 下一个js-每次更改路由时在服务器端调用一个函数,php,reactjs,next.js,server-side-rendering,next,Php,Reactjs,Next.js,Server Side Rendering,Next,我正在将一个旧堆栈移动到下一个js,我需要一些帮助 我有一个php后端,每次更改路由时,我都想从这个后端检查一个控制器,我想在服务器端这样做 对于更改路由,我使用下一个路由的链接,它只对客户端有效 有没有什么方法可以在不刷新应用程序的情况下调用服务器端控制器?您可以利用并监视路由更改,并执行所需的操作。下面您可以找到两个示例实现,一个使用类组件,另一个使用挂钩。两者都应该起作用 // class component import NextApp from 'next/app'; import R

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

我有一个php后端,每次更改路由时,我都想从这个后端检查一个控制器,我想在服务器端这样做

对于更改路由,我使用
下一个路由
链接
,它只对客户端有效

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

您可以利用并监视路由更改,并执行所需的操作。下面您可以找到两个示例实现,一个使用类组件,另一个使用挂钩。两者都应该起作用

// 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;
//类组件
从“下一步/应用程序”导入NextApp;
从“下一个/路由器”导入路由器;
类应用程序扩展了nextap{
componentDidMount(){
Router.events.on('routeChangeStart',()=>{
//呼叫您的后端
});
}
render(){
const{Component,pageProps}=this.props;
返回;
}
}
导出默认应用程序;
//使用钩子
从“下一个/路由器”导入路由器;
常量应用=({Component,pageProps})=>{
React.useffect(()=>{
const doMagic=()=>{
//做你的事
}
Router.events.on('routeChangeStart',doMagic);//添加侦听器
return()=>{
Router.events.off('routeChangeStart',doMagic);//删除侦听器
} 
}, []);
返回;
}
导出默认应用程序;

谢谢您的回答+如果解决了你的问题,考虑将答案标记为点击点击答案旁边的选中标记,将其从灰色变为填充。这样,您就可以帮助其他有类似问题的人找到解决方法:)
// 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;