我环顾了文档,看看_app.js是否可以读取一个子弹(没有提及任何内容)。我需要将此块添加到HTTP get请求中,以获取正确的数据,然后将结果返回到_app.js,然后可以在其中将props传递给所有组件和页面。
示例:当我转到http://localhost:3000/some-business-name时,_app.js可以获取该条目(some-business-name),执行请求,并将props传递给项目中的所有组件和页面。
但是我真正要做的是让App道具传递到pages文件夹内的所有其他页面。
在我的页面文件夹中,我有:
我使用的数据文件是用于测试动态路由的业务数据对象的数组。
我查看了NextJS文档,但在理解如何完成此操作时遇到问题。我仍然需要该插件存在,我只需要帮助了解我如何才能使_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