Next.js React 应用程序未显示自定义组件内容答案

【问题标题】：Next.js React app not showing custom component contentNext.js React 应用程序未显示自定义组件内容
【发布时间】：2018-11-24 23:01:01
【问题描述】：

我是新手，我目前正在尝试一些基本示例。我刚刚创建了一个链接索引页面和一个关于页面。然后我创建了一个自定义 App 组件，它应该显示容器中的所有内容，而不是只显示主页/关于链接按钮和“Hello next.js”文本（它没有显示（“在每个页面上”）。请参阅页面布局下面

在每一页上 *** 这没有显示主页按钮 |关于页面按钮你好 next.js

任何人都可以看到任何错误吗？我已经尝试过搜索，但我仍然看不到哪里出错了

// _app.js
import App, {Container} from 'next/app';

//define the custome App - a class which extends the 
default App
class myApp extends App {
return() {
    //compent will be the page content
    // e.g. index or about
    const {Component, pageProps} = this.props;

    return (
        //container contains page content
        <Container>
            {/* Content which will be shared */}
            <p>On every Page</p>
            {/* Component is page e.g. index or about 
*/}
            <Component {...pageProd}/>
        </Container>

    );
}
}
export default myApp;


//index.js
import Link from 'next/link'

// Pass this content as 'props' to child components
const Index = props => (
  <div>
<Link href="/index">
    <button>Home page</button>
</Link>
<Link href="/about">
    <button>About page</button>
</Link>


<p>Hello Next.js</p>
</div>
 )

export default Index


// about.js
import Link from 'next/link'

// Pass this content as 'props' tp child components
const About = props => (
<div>
<Link href="/">
    <button>Home page</button>
</Link>
<Link href="/about">
    <button>About page</button>
</Link>


<p>Hello Next.js</p>
</div>
)

export default About

【问题讨论】：

标签： javascript reactjs next.js

【解决方案1】：

是的.. 第一个是 return 而不是 render

【讨论】：

干杯哥们。另请参阅：应该是 pageProps。现在可以使用了，感谢您的帮助

【解决方案2】：

我有类似的问题，我的问题是缓存，试试这个

rm -rf node_modules/ && rm -rf package-lock.json && npm install && npm run build:tailwind && npm run dev

【讨论】：