-
Notifications
You must be signed in to change notification settings - Fork 657
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
React.renderToString() and Helmet.constructor.rewind() not working #1
Comments
Fixed this issue here and submitted a pull request - #2 My branch till then - https://github.com/snow01/react-helmet.git Thanks! |
Thanks @snow01! I gave it a shot and now running I went through
The code here shows that it's a static method. :) |
Above questions show a very fundamental confusion about working of react-helmet. Let me try explain here --
What is the reason/use case for having the render() method only render this.props.children?
Why does the server usage example use Helmet.constructor.rewind()?
|
This is what I just made up to solve the server-side problem in my fluxible app debug('Rendering Application component into html');
let html = React.renderToStaticMarkup(htmlComponent({
context: context.getComponentContext(),
state : exposed,
markup : React.renderToString(context.createElement())
}));
// Get head tags from Helmet
let headMap = Helmet.rewind();
// Make sure they are all HTML
headMap.title = `<title>${headMap.title}</title>`;
// Get all dem HTML tags
let headHtml = Object.values(headMap).join('\n');
debug(`<head> inject from Helmet:\n${headHtml}`);
headHtml = headHtml.replace(/(\r\n|\n|\r)/gm, '');
// inject them in the HTML
html = html.replace('</head>', `${headHtml}</head>`);
debug('Sending markup');
res.type('html');
res.write('<!DOCTYPE html>' + html);
res.end(); |
@snow01 link, meta all reside in head section of the HTML page, while displayable content resides in body section of the page. Haha thanks I know this part. You can assume react-helmet as a collector of properties. Through you do not intend to render anything - but want to collect all the meta properties seen in the entire render cycle. You define meta tags at the most appropriate component, wherever data is available. There can be multiple components defining - at the end of the render cycle, Helmet component collects all property types and attaches them into head section. That's the exact purpose of react-helmet - to be able to generate meta tags. This was a very good explanation. I had a similar idea for my isomorphic alt app. I've been using webpack's html-loader for rendering the html on a branch currently and been experimenting with react-helmet. The idea is to render the main app and the head section with webpack as 2 separate entry points (from the server), and replacing the content on a response much like yours. Thanks. |
Thanks for the repo, it solves what I've been attempting to solve with
<link>
and<meta>
tags.Problem:
React.renderToString(<Handler />);
retuns anoscript
tagHelmet.constructor.rewind()
throws aConfig information
What I have attempted
Running this
I think it was because this line was executed, i.e. it returned a
null
object.I also tried running:
Then I tried:
Reduced Test Case
I don't have a reduced test case of this problem, but I'm attempting to use it this way.
Do let me know if you require more information, or if I am taking the wrong approach. Thanks!
The text was updated successfully, but these errors were encountered: