React-router: Question: recommended way to maintain the page title
Note: This is a question, and not an issue. Please close it if this isn't the appropriate place for it.
Question: Can you recommend a way to maintain the page title with react-router?
nemtsov
All 20 comments
We discussed this in #107, but I don't think we ever actually figured out a "recommended" solution.
mjackson
on 16 Sep 2014
We're currently passing both state and props to a static getMetaData method that returns title and other metadata such as OpenGraph tags. This is then used in componentDidUpdate so we're sure any changes are reflected in the title at all times, this works especially well when your title might be dependent on data that might arrive in chunks.
simenbrekken
on 16 Sep 2014
I should put some code up on github. Here's how I handle it:
Constraints:
- There is an arbitrary level of nesting
- There is a potentially inconsistent nesting level of handlers that affect the title
- Asynchronous data affects the title
Method:
I make a title module that:
- maintains state as an array of data objects representing different segments of the title
- whenever handlers want to, they can push, pop, and replace data into this module
- the module has logic that constructs a title based on the objects in its state whenever the data changes
Its pretty much how a react component works, except it doesn't work on the dom, it sets document.title.
ryanflorence
on 17 Sep 2014
Since lots of people are asking about this, maybe we could just make a module like you're describing and distribute it with the router? It's not totally out of scope..
mjackson
on 17 Sep 2014
If you were going to do that, would it also make sense to allow specifying <meta> as well? Or basically anything that exists within <head />?
bobeagan
on 17 Sep 2014
my module just outputs to document.title, its not actually a component or anything. It just sort of acts like one.
ryanflorence
on 17 Sep 2014
But ... we may want some fancy business with anything in <head/> for server-side rendering I think.
ryanflorence
on 17 Sep 2014
@rpflorence Definitely, you'll probably want various meta-tags for Twitterbook and Myface
simenbrekken
on 17 Sep 2014
SEO ALL THE THINGS!
bobeagan
on 17 Sep 2014
Haven't used yet but adding for posterity's sake: react-document-title looks promising and seems like it could be a nice little addition to Route.props :+1:
Obviously, this is easy for me to say since I'm not a project maintainer :)
imjared
on 9 Oct 2014
react-document-title is good, though it would be better to support SEO titles in react-router since react-document-title just duplicates its hierarchy. SEO title is a navigational aspect and can be lifted to router IMO.
ivan-kleshnin
on 16 Jan 2015
I probably subliminally got the idea from this thread and later forgot about it.
gaearon
on 16 Jan 2015
Ivan, your point makes a lot of sense to me
alanhogan
on 16 Jan 2015
I think it's best left in userland though. It's trivial to make a function to wrap your route handlers into react-document-title or whatever else comes along.
gaearon
on 17 Jan 2015
Anything new here? I'm banging my head against the wall because of this ;) (doing server-side rendering).
xpepermint
on 30 Apr 2015
^I'm wondering the same thing as well. As of now I've yet to find a solution for rendering route-specific meta tags on the server.
jaraquistain
on 27 May 2015
@jaraquistain try https://github.com/gaearon/react-side-effect
It was created for such tasks
ivan-kleshnin
on 27 May 2015
@ivan-kleshnin Thanks for the tip, I'll check it out
jaraquistain
on 27 May 2015
React helmet is great! Check it out https://github.com/nfl/react-helmet
rafinskipg
on 25 Oct 2016
I second react-helmet, I actually ended up using that in my implementation
jaraquistain
on 26 Oct 2016
Related issues
jzimmek
路
3Comments
hgezim
路
3Comments
imWildCat
路
3Comments
maier-stefan
路
3Comments
tomatau
路
3Comments
Most helpful comment
React helmet is great! Check it out https://github.com/nfl/react-helmet