Question

我有一个页面在2秒后会在getInitialProps()中生成一个随机数。有一个按钮，允许用户通过Router.push()“刷新”页面。 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

Router.push()返回一个Promise。所以你可以做类似...

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

Answer 2

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

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中显示正在加载的文本（我已经评论过），这样您就不必检查每个页面的正在加载状态

如果您想在此处使用第三方软件包，请使用nprogress

Next.js-在Router.push（）或getInitialProps（）完成时执行回调

2 个答案: