В Next JS Можно ли сделать так, чтобы пользовательские _app. js читали слаг, getInitialProps и передавали эти реквизиты каждому компоненту, включая все страницы? - PullRequest
Новая
       92

В Next JS Можно ли сделать так, чтобы пользовательские _app. js читали слаг, getInitialProps и передавали эти реквизиты каждому компоненту, включая все страницы?

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

Я просмотрел документы, чтобы узнать, смогу ли я _app. js прочитать слаг (ничего об этом не упомянуто). Мне нужно, чтобы этот слаг был добавлен в HTTP-запрос get, чтобы получить правильные данные, которые затем возвращали бы результаты в _app. js, в котором я мог бы затем использовать для передачи реквизит всем компонентам и страницам.

Пример : когда я go до http://localhost: 3000 / some-business-name , _app. js может захватить слаг (some-business-name), выполнить запрос и передать реквизиты все компоненты и страницы в проекте.

Но я действительно изо всех сил стараюсь заставить реквизиты приложения передавать все остальные страницы в папке страниц.

На моих страницах У меня есть папка:

  1. _app. js - (что мне нужно для передачи реквизита на все страницы)
  2. [slug]. js - (root страница, которая раньше обнаруживала слаг и теперь мне нужно, чтобы он просто получал реквизиты от _app. js)
  3. success. js - (нужно получать реквизиты от _app. js)
  4. ошибка. js - (необходимо получить реквизит от _app. js)

Я использую файл данных, который является массивом объектов бизнес-данных. o который я использую для тестирования динамической c маршрутизации.

Я посмотрел в документах Next JS и у меня возникла проблема с пониманием, как это можно сделать. Мне все еще нужно, чтобы слаг существовал, мне просто нужна помощь, чтобы понять, как я могу получить _app. js для полного захвата динамической c маршрутизации.

Мой код для _app. js: 1026 * 

import React from 'react'
import App from 'next/app'
import { businesses } from '../data';

export default function MyApp({ Component, appProps }) {
  return (
    <Component appProps={appProps} />
  )
};

MyApp.getInitialProps = async ({ appContext }) => {
  const appProps = await App.getInitialProps(slug);
  return {appProps};
};

App.getInitialProps = async (slug) => {
  const business = businesses.filter((business) => {
    return business.slug === slug;
  });
  return business[0];
};

В настоящее время мой [slug]. js is: 

import React from 'react';
import Head from 'next/head';
import LandingPage from '../components/landing-page';

export default function Slug(props) {
  return (
    <div>
      <Head>
        <title>Home</title>
        <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css' integrity='sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm' crossOrigin='anonymous' />
        <link href='https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap' rel='stylesheet' />
        <script src='https://code.jquery.com/jquery-3.2.1.slim.min.js' integrity='sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN' crossOrigin='anonymous'></script>
        <script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js' integrity='sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q' crossOrigin='anonymous'></script>
        <script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js' integrity='sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl' crossOrigin='anonymous'></script>
      </Head>

      <LandingPage businessInfo={props.appProps}/>

      <style global jsx>{`
          body {
            font-family: 'Open Sans', sans-serif;
          }
        `}</style>
    </div>
  );
};

Удивительно, но я могу получать реквизиты приложения для компонента LandingPage в [slug]. js, но не в успехе. js и ошибка. js страниц.

Любая помощь очень ценится! Спасибо!

1 Ответ

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

Вы можете использовать что-то вроде этого: 

import React from 'react'
import App from 'next/app'
import { Router } from '../routes'

class MyApp extends App {
  // Only uncomment this method if you have blocking data requirements for
  // every single page in your application. This disables the ability to
  // perform automatic static optimization, causing every page in your app to
  // be server-side rendered.
  //
  // static async getInitialProps(appContext) {
  //   // calls page's `getInitialProps` and fills `appProps.pageProps`
  //   const appProps = await App.getInitialProps(appContext);
  //
  //   return { ...appProps }
  // }

  render() {
    const { Component, appProps } = this.props
    // Workaround for https://github.com/zeit/next.js/issues/8592
    const { err } = this.props
    const modifiedPageProps = { ...appProps, err }
    return (
        <div id="comp-wrapp">
          <Component {...modifiedPageProps} />
        </div>
    )
  }
}

export default MyApp
...