Экран загрузки при переходе на следующую страницу js - PullRequest
Новая
       16

Экран загрузки при переходе на следующую страницу js

1 голос
/ 11 апреля 2019

Я пытаюсь реализовать экран загрузки при изменении маршрутов в моем приложении Nextjs, например / home -> / about.

Моя текущая реализация выглядит следующим образом.Я устанавливаю исходное загруженное состояние на false и затем изменяю его на componentDidMount .Я также вызываю функцию Router.events.on внутри componentDidMount , чтобы изменить состояние загрузки, когда начинается изменение маршрута.

_app.js в папке страниц 

class MyApp extends App {
  constructor(props) {
    super(props);
    this.state = {
      loaded: false,
    };
  }

  componentDidMount() {
    this.setState({ loaded: true });
    Router.events.on('routeChangeStart', () => this.setState({ loaded: false }));
    Router.events.on('routeChangeComplete', () => this.setState({ loaded: true }));
  }



  render() {
    const { Component, pageProps } = this.props;

    const { loaded } = this.state;

    const visibleStyle = {
      display: '',
      transition: 'display 3s',
    };
    const inVisibleStyle = {
      display: 'none',
      transition: 'display 3s',
    };
    return (
      <Container>
        <>
          <span style={loaded ? inVisibleStyle : visibleStyle}>
            <Loader />
          </span>
          <span style={loaded ? visibleStyle : inVisibleStyle}>
            <Component {...pageProps} />
          </span>
        </>
      </Container>
    );
  }
}

Это прекрасно работает, но я чувствую, что может быть лучшее решение, более элегантное решение,Это единственный способ, который не является трудоемким для реализации этой функции загрузки, или есть альтернатива?

1 Ответ

1 голос
/ 12 апреля 2019

Почему бы не использовать nprogress, как указано в _app.js

import React from 'react';
import Router from 'next/router';
import App, { Container } from 'next/app';
import NProgress from 'nprogress';

NProgress.configure({ showSpinner: publicRuntimeConfig.NProgressShowSpinner });

Router.onRouteChangeStart = () => {
  // console.log('onRouteChnageStart triggered');
  NProgress.start();
};

Router.onRouteChangeComplete = () => {
  // console.log('onRouteChnageComplete triggered');
  NProgress.done();
};

Router.onRouteChangeError = () => {
  // console.log('onRouteChnageError triggered');
  NProgress.done();
};

export default class MyApp extends App { ... }

Ссылка на nprogress .

Вам также необходимо включить файл стилей.Если вы поместите файл css в каталог static, вы можете получить доступ к стилю следующим образом: 

<link rel="stylesheet" type="text/css" href="/static/css/nprogress.css" />

Убедитесь, что CSS доступен на всех страницах ...

Этобудет работать для всех изменяющихся вами маршрутов.

...