在 NextJS 中是否可以让自定义 _app.js 读取 slug,getInitialProps 并将这些道具传递给包括所有页面在内的每个组件?
In NextJS Is it possible to have custom _app.js read a slug, getInitialProps and pass those props to every component including all pages?
我查看了文档,看看是否可以让 _app.js 读取 slug(没有提及)。我需要将此 slug 添加到 HTTP get 请求中以获取正确的数据,然后 returns 结果为 _app.js,然后我可以在其中将 props 传递给所有组件和页面。
示例:当我去 http://localhost:3000/some-business-name 时,_app.js 可以抓取 slug (some-business-name),执行请求,并将 props 传递给项目中的所有组件和页面。
但我真正费力做的是让 App 道具传递给 pages 文件夹内的所有其他页面。
在我的页面文件夹中我有:
- _app.js -- (我需要给所有页面传递道具)
- [slug].js --(用于检测 slug 的根页面,现在我需要它只接收来自 _app.js 的道具)
- success.js -- (需要从_app.js接收道具)
- error.js -- (需要从_app.js接收道具)
我正在使用一个数据文件,它是我用来测试动态路由的业务数据对象数组。
我查看了 NextJS 文档,但在理解如何完成此操作时遇到了问题。我仍然需要 slug 存在,我只需要帮助了解如何让 _app.js 完全接管动态路由。
我的 _app.js 代码是:
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 是:
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>
);
};
令人惊讶的是,我能够在 [slug].js 中的 LandingPage 组件上接收 App 道具,但在 success.js 和 error.js 页面中却没有。
非常感谢任何帮助!谢谢!
你可以这样使用:
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
更好的做法是
class NextDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
const { req } = ctx
// pass down everything u need there
return { ...initialProps, locale }
}
我查看了文档,看看是否可以让 _app.js 读取 slug(没有提及)。我需要将此 slug 添加到 HTTP get 请求中以获取正确的数据,然后 returns 结果为 _app.js,然后我可以在其中将 props 传递给所有组件和页面。
示例:当我去 http://localhost:3000/some-business-name 时,_app.js 可以抓取 slug (some-business-name),执行请求,并将 props 传递给项目中的所有组件和页面。
但我真正费力做的是让 App 道具传递给 pages 文件夹内的所有其他页面。
在我的页面文件夹中我有:
- _app.js -- (我需要给所有页面传递道具)
- [slug].js --(用于检测 slug 的根页面,现在我需要它只接收来自 _app.js 的道具)
- success.js -- (需要从_app.js接收道具)
- error.js -- (需要从_app.js接收道具)
我正在使用一个数据文件,它是我用来测试动态路由的业务数据对象数组。
我查看了 NextJS 文档,但在理解如何完成此操作时遇到了问题。我仍然需要 slug 存在,我只需要帮助了解如何让 _app.js 完全接管动态路由。
我的 _app.js 代码是:
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 是:
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>
);
};
令人惊讶的是,我能够在 [slug].js 中的 LandingPage 组件上接收 App 道具,但在 success.js 和 error.js 页面中却没有。
非常感谢任何帮助!谢谢!
你可以这样使用:
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
更好的做法是
class NextDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
const { req } = ctx
// pass down everything u need there
return { ...initialProps, locale }
}