From b05df7087212ba4384d8aec93c769089491a1b27 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fredrik=20H=C3=B6glund?= Date: Sun, 10 Feb 2019 20:48:13 +0100 Subject: [PATCH] Fix first render of with-react-helmet example (#6235) --- examples/with-react-helmet/README.md | 1 + examples/with-react-helmet/pages/_app.js | 33 +++++++++++++++++++ examples/with-react-helmet/pages/_document.js | 14 -------- examples/with-react-helmet/pages/about.js | 30 ++++++----------- 4 files changed, 44 insertions(+), 34 deletions(-) create mode 100644 examples/with-react-helmet/pages/_app.js diff --git a/examples/with-react-helmet/README.md b/examples/with-react-helmet/README.md index 764d7d43..3a967aed 100644 --- a/examples/with-react-helmet/README.md +++ b/examples/with-react-helmet/README.md @@ -46,4 +46,5 @@ now This an minimalistic example of how to combine next.js and [react-helmet](https://github.com/nfl/react-helmet). The title of the page shall be changed to "Hello next.js!" +If you go to the page `/about`, the title will be overridden to "About | Hello next.js!" The rest is all up to you. diff --git a/examples/with-react-helmet/pages/_app.js b/examples/with-react-helmet/pages/_app.js new file mode 100644 index 00000000..df270b5e --- /dev/null +++ b/examples/with-react-helmet/pages/_app.js @@ -0,0 +1,33 @@ +import React from 'react' +import App, { Container } from 'next/app' +import Helmet from 'react-helmet' + +export default class MyApp extends App { + static async getInitialProps ({ Component, ctx }) { + let pageProps = {} + + if (Component.getInitialProps) { + pageProps = await Component.getInitialProps(ctx) + } + + return { pageProps } + } + + render () { + const { Component, pageProps } = this.props + + return ( + + + + + ) + } +} diff --git a/examples/with-react-helmet/pages/_document.js b/examples/with-react-helmet/pages/_document.js index 666116c1..5603727e 100644 --- a/examples/with-react-helmet/pages/_document.js +++ b/examples/with-react-helmet/pages/_document.js @@ -26,24 +26,10 @@ export default class extends Document { .map(el => this.props.helmet[el].toComponent()) } - get helmetJsx () { - return ( - - ) - } - render () { return ( - {this.helmetJsx} {this.helmetHeadComponents} diff --git a/examples/with-react-helmet/pages/about.js b/examples/with-react-helmet/pages/about.js index 79cf65ab..7653b350 100644 --- a/examples/with-react-helmet/pages/about.js +++ b/examples/with-react-helmet/pages/about.js @@ -1,24 +1,14 @@ import React from 'react' import Helmet from 'react-helmet' -export default class About extends React.Component { - static async getInitialProps ({ req }) { - if (req) { - Helmet.renderStatic() - } - return { title: 'About' } - } - - render () { - const { title } = this.props - return ( -
- - About the World -
- ) - } +export default function About () { + return ( +
+ + About the World +
+ ) }