Как реализовать загрузочный экран в следующем. js - PullRequest
Новая
       85

Как реализовать загрузочный экран в следующем. js

0 голосов
/ 13 апреля 2020

Я новичок в следующем js и использую следующий js v9.3 + next-redux-wrapper v5 + @ material-ui / core v4.2 + custom express server

I я пытаюсь реализовать экран загрузки при изменении маршрутов в моем приложении Next js, поэтому я использую framer motion для перехода между страницами и работает нормально, но теперь как можно использовать компонент загрузки при изменении маршрутов

Я использовал эти методы, но они не работали : Экран загрузки при следующем js переходе страницы и Как использовать загрузку компонент вместо nprogress?

Моя текущая реализация выглядит следующим образом:

_app. js

import React, { useEffect } from "react";
import { ThemeProvider } from "@material-ui/core/styles";
import { CssBaseline } from "@material-ui/core";
import { theme } from "../lib/theme";
import withRedux from "next-redux-wrapper";
import { Provider } from "react-redux";
import reduxStore from "../store/store";
import { PersistGate } from "redux-persist/integration/react";
import { AnimatePresence } from "framer-motion";
import Navbar from "../components/Navbar";
import Meta from "../components/Meta";

function MyApp(props) {
  useEffect(() => {
    const jssStyles = document.querySelector("#jss-server-side");
    if (jssStyles && jssStyles.parentNode)
      jssStyles.parentNode.removeChild(jssStyles);
  }, []);
  const { Component, pageProps, store, router } = props;
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Provider store={store}>
        <PersistGate persistor={store.__PERSISTOR} loading={null}>
          <Meta/>
          <Navbar {...props} />
          <AnimatePresence exitBeforeEnter>
            <Component {...pageProps} key={router.route}/>
          </AnimatePresence>
        </PersistGate>
      </Provider>
    </ThemeProvider>
  );
}

export default withRedux(reduxStore)(MyApp);

1 Ответ

0 голосов
/ 13 апреля 2020

Это может помочь. Вы можете поместить этот компонент в компонент макета и обернуть его _app. js или напрямую импортировать в _app. js: 

import React from 'react';
import Router from 'next/router';
import CustomLoadingScreen from './components/CustomLoadingScreen'; // example


Router.onRouteChangeStart = () => {
    console.log('onRouteChnageStart Triggered');
    <CustomLoadingScreen />;

};

Router.onRouteChangeComplete = () => {
    console.log('onRouteChnageComplete Triggered');
    <CustomLoadingScreen />;

};

Router.onRouteChangeError = () => {
    console.log('onRouteChnageError Triggered');
    <CustomLoadingScreen />;

};

Вы можете создать захватить весь viewbox устройства при его вызове.

...