react-head contact us page
- View the example code in src/Contact.js. Note that this works isomorphically.
+ View the example code in src/Contact.js. Note that this works
+ isomorphically.
+
+ Click the example home page below to see how the Header tags will update
-Click the example home page below to see how the Header tags will update
- Home +-
Docs
diff --git a/example/src/Home.js b/example/src/Home.js
index 3b4908f..5e2ee6b 100644
--- a/example/src/Home.js
+++ b/example/src/Home.js
@@ -1,17 +1,22 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
import React from 'react';
-import { HeadTag, Style } from 'react-head';
-import { Link } from 'react-router-dom';
+import { Link, Meta, Title, Style } from 'react-head';
+import { Link as RouterLink } from '@reach/router';
import logo from './react.svg';
import './Home.css';
+const NestedComponent = () => (
+
+);
+
const Home = () => (
-
Home | Example react-head App +Home | Example react-head App -- + + react-head example
@@ -19,12 +24,13 @@ const Home = () => (View the example code in
src/Home.js. Note that this works isomorphically. +Click the example contact page below to see how the Header tags will update
- Contact Page +Contact Page -
Docs
diff --git a/example/src/client.js b/example/src/client.js
index 0f175e7..6d6cbe4 100644
--- a/example/src/client.js
+++ b/example/src/client.js
@@ -1,12 +1,12 @@
-import App from './App';
-import BrowserRouter from 'react-router-dom/BrowserRouter';
import React from 'react';
import { hydrate } from 'react-dom';
+import { HeadProvider } from 'react-head';
+import App from './App';
hydrate(
-
+ , + , document.getElementById('root') ); diff --git a/example/src/index.js b/example/src/index.js index a0ea2f7..309e1fb 100644 --- a/example/src/index.js +++ b/example/src/index.js @@ -1,11 +1,17 @@ -import app from './server'; import http from 'http'; +import app from './server'; const server = http.createServer(app); let currentApp = app; -server.listen(process.env.PORT || 3000); +server.listen(process.env.PORT || 3000, error => { + if (error) { + console.log(error); + } + + console.log('🚀 started'); +}); if (module.hot) { console.log('✅ Server-side HMR Enabled!'); diff --git a/example/src/server.js b/example/src/server.js index fe6a45a..6271d00 100644 --- a/example/src/server.js +++ b/example/src/server.js @@ -1,49 +1,60 @@ import React from 'react'; -import { StaticRouter } from 'react-router-dom'; +import { ServerLocation, isRedirect } from '@reach/router'; import express from 'express'; -import { renderToString } from 'react-dom/server'; -import { HeadCollector } from 'react-head'; +import { renderToString, renderToStaticMarkup } from 'react-dom/server'; +import { HeadProvider } from 'react-head'; import App from './App'; -const assets = require(process.env.RAZZLE_ASSETS_MANIFEST); +const assets = require(process.env.RAZZLE_ASSETS_MANIFEST); // eslint-disable-line const server = express(); server .disable('x-powered-by') .use(express.static(process.env.RAZZLE_PUBLIC_DIR)) .get('/*', (req, res) => { - const context = {}; const headTags = []; - const markup = renderToString( -- - - ); + let markup; + + try { + markup = renderToString( +- -- + + ); + } catch (error) { + if (isRedirect(error)) { + res.redirect(error.uri); + } else { + res.status(500).end(`An error occurred, ${error}`); + } + } - if (context.url) { - res.redirect(context.url); - } else { - res.status(200).send( - ` + res.status(200).send( + ` - ${assets.client.css ? `` : ''} - ${process.env.NODE_ENV === 'production' - ? `` - : ``} - ${renderToString(headTags)} + ${ + assets.client.css + ? `` + : '' + } + ${ + process.env.NODE_ENV === 'production' + ? `` + : `` + } + ${renderToStaticMarkup(headTags)}+ ++ ${markup}` - ); - } + ); }); export default server; diff --git a/package.json b/package.json index 1ff7f81..d2985cb 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "build": "rollup -c && npm run build:flow", "example": "cd example && npm i && npm start", "dev": "run-p build:watch example", - "test": "jest", + "test": "jest --no-cache", "posttest": "npm run lint", "test:watch": "jest --watch", "typecheck:flow": "flow check --max-warnings=0",
-
Docs
diff --git a/example/src/client.js b/example/src/client.js
index 0f175e7..6d6cbe4 100644
--- a/example/src/client.js
+++ b/example/src/client.js
@@ -1,12 +1,12 @@
-import App from './App';
-import BrowserRouter from 'react-router-dom/BrowserRouter';
import React from 'react';
import { hydrate } from 'react-dom';
+import { HeadProvider } from 'react-head';
+import App from './App';
hydrate(
-