我查看了文档，看看是否可以让_app.js读取一个slug(没有提及(。我需要将这个slug添加到HTTP get请求中，以获取正确的数据，然后将结果返回到_app.js，然后我可以使用它将props传递到所有组件和页面。
示例：当我去http://localhost:3000/some-业务名称，app.js可以获取slug(一些业务名称(，执行请求，并将props传递给项目中的所有组件和页面。
但我真正想做的是让应用程序道具传递到页面文件夹中的所有其他页面。
在我的页面文件夹中，我有：
- _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组件上接收应用程序道具，但在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 }
}