Merge pull request #1 from mstrluke/development

Added Helmet to pages and fixed helmet renderer

Author: mstrluke

README.md

@@ -10,6 +10,7 @@ Use it as you want.
 - Client Side Rendering
 - Isomorphyc Rendering
 - Hot Module Replacement
+- Webpack Dev Server
 - Code splitting
 
 ### Todo features
@@ -20,7 +21,6 @@ Use it as you want.
 - React Context API
 - API config
 
-
 ### Installation
 
 Clone and install the dependencies

src/pages/AboutPage/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Helmet } from 'react-helmet'
 
 const AboutPage = ({ history }) => {
   const handleClick = () => {
@@ -8,6 +9,10 @@ const AboutPage = ({ history }) => {
 
   return (
     <div>
+      <Helmet>
+        <title>About page | React SSR</title>
+        <meta name="description" content="About page" />
+      </Helmet>
       <p>About Page</p>
       <button onClick={handleClick}>Go to Home page</button>
     </div>

src/pages/HomePage/index.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Helmet } from 'react-helmet'
+
 
 const HomePage = ({ history }) => {
   const handleClick = () => {
@@ -8,6 +10,10 @@ const HomePage = ({ history }) => {
 
   return (
     <div>
+      <Helmet>
+        <title>Home page | React SSR</title>
+        <meta name="description" content="Home page" />
+      </Helmet>
       <p>Home Page</p>
       <button onClick={handleClick}>Go to About page</button>
     </div>

src/pages/NotFoundPage/index.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Helmet } from 'react-helmet'
+
+const NotFound = ({ history }) => {
+  const handleClick = () => {
+    history.push('/')
+  }
+
+  return (
+    <div>
+      <Helmet>
+        <title>404 Not Found Page | React SSR</title>
+        <meta name="description" content="Not Found Page" />
+      </Helmet>
+      <p>404 Not Found Page</p>
+      <button onClick={handleClick}>Go to Home page</button>
+    </div>
+  )
+}
+
+NotFound.propTypes = {
+  history: PropTypes.object
+}
+
+export default NotFound;

src/routes/index.js

@@ -1,5 +1,6 @@
 import HomePage from '../pages/HomePage';
 import AboutPage from '../pages/AboutPage';
+import NotFoundPage from '../pages/NotFoundPage';
 
 export default [
   {
@@ -13,5 +14,10 @@ export default [
     component: AboutPage,
     path: '/about',
     exact: true
+  },
+  {
+    title: 'Not Found',
+    component: NotFoundPage,
+    exact: true
   }
 ];

src/utils/template.js

@@ -23,9 +23,6 @@ const template = ({ css, scripts }, req, res) => {
       <link rel="icon" href="/favicon.ico" />
       <link rel="manifest" href="/manifest.webmanifest" />
       <meta name="viewport" content="width=device-width, initial-scale=1" />
-      <meta name="description" content="Minimal SSR React App" />
-      <meta name="theme-color" content="#000000" />
-      <title>Minimal SSR React App</title>
         ${helmet.title.toString()}
         ${helmet.meta.toString()}
         ${helmet.link.toString()}