Next.js

Question

我有一个页面在 2 秒后在 getInitialProps() 中生成一个随机数。有一个按钮允许用户通过 Router.push() "refresh" 页面。由于 getInitalProps() 需要 2 秒才能完成，我想显示一个加载指示器。

import React from 'react'
import Router from 'next/router'

export default class extends React.Component {
  state = {
    loading: false
  }

  static getInitialProps (context) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({random: Math.random()})
      }, 2000)
    })
  }

  render() {
    return <div>
      {
        this.state.loading
        ? <div>Loading</div>
        : <div>Your random number is {this.props.random}</div>
      }
      <button onClick={() => {
        this.setState({loading: true})
        Router.push({pathname: Router.pathname})
      }}>Refresh</button>
    </div>
  }
}

我如何知道 Router.push()/getInitialProps() 何时完成以便清除我的加载指示器？

编辑：使用 Router.on('routeChangeComplete') 是最明显的解决方案。但是，有多个页面，用户可以多次单击按钮。有没有安全的方法来为此使用路由器事件？

Answer 1

用户可以在 pages/_app.js 中使用 Router 事件侦听器，管理页面加载并将状态注入组件

import React from "react";
import App, { Container } from "next/app";
import Router from "next/router";

export default class MyApp extends App {
  state = {
    loading: false
  };

  componentDidMount(props) {
    Router.events.on("routeChangeStart", () => {
      this.setState({
        loading: true
      });
    });

    Router.events.on("routeChangeComplete", () => {
      this.setState({
        loading: false
      });
    });
  }

  static async getInitialProps({ Component, ctx }) {
    let pageProps = {};

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);
    }

    return { pageProps };
  }

  render() {
    const { Component, pageProps } = this.props;
    return (
      <Container>
        {/* {this.state.loading && <div>Loading</div>} */}
        <Component {...pageProps} loading={this.state.loading} />
      </Container>
    );
  }
}

并且您可以在页面组件中将加载作为道具访问。

import React from "react";
import Router from "next/router";

export default class extends React.Component {
  static getInitialProps(context) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({ random: Math.random() });
      }, 2000);
    });
  }

  render() {
    return (
      <div>
        {this.props.loading ? <div>Loading</div> : <div>Your random number is {this.props.random}</div>}
        <button
          onClick={() => {
            this.setState({ loading: true });
            Router.push({ pathname: Router.pathname });
          }}
        >
          Refresh
        </button>
      </div>
    );
  }
}

您还可以在 _app.js 中显示加载文本（我已经评论过），这样您就不必在每个页面中检查 loading 状态

如果你想在这里使用第三方包，一个不错的nprogress

Answer 2

Router.push() returns 一个承诺。所以你可以做类似...

Router.push("/off-cliff").then(() => {
  // fly like an eagle, 'til I'm free
})

Next.js - 当 Router.push() 或 getInitialProps() 完成时执行回调

Next.js - execute callback when Router.push() or getInitialProps() completes

javascript