React-router: Recommended way to set document.title?
Is there a recommended way to set document.title upon routing? I suppose one could just set it in all of the componentDidMount handlers, but it might be nice if there was a general strategy for this. (For example, maybe one page doesn't really care about title, in which case we'd want to fall back to the default.)
(Someone was also asking in IRC about this last night right after you left, @rpflorence.)
sophiebits
All 13 comments
componentDidMount seems good?
var Handler = React.createClass({
componentDidMount: function() {
document.title = "Amazing Page";
}
});
Often it will probably depend on data you fetch though:
var Handler = React.createClass({
componentDidMount: function() {
someStore.fetchStuff(this.params.id, function(data) {
this.setState({data: data});
document.title = "Amazing Page | " + data.name;
}.bind(this));
}
});
Since I can't imagine all the scenarios that go into deciding what your page title is, and since you generally aren't serializing state to the <head> and <title> tags, I don't expect to have a conventional way to do this.
I think just doing document.title wherever you want is enough.
Eventually we will have a server-rendering story/example, so in that case you'd probably want a helper function that is a noop when on the server.
ryanflorence
on 25 Jun 2014
Eventually we will have a server-rendering story/example, so in that case you'd probably want a helper function that is a noop when on the server.
Ideally the server-rendered markup can have the right title too. :)
sophiebits
on 26 Jun 2014
I've messed with React.renderComponent(<App/>, document.documentElement)
and it almost works, I don't think you'll ever own anything higher than
body.
On Wed, Jun 25, 2014 at 4:00 PM, Ben Alpert [email protected]
wrote:
Eventually we will have a server-rendering story/example, so in that case
you'd probably want a helper function that is a noop when on the server.Ideally the server-rendered markup can have the right title too. :)
—
Reply to this email directly or view it on GitHub
https://github.com/rpflorence/react-nested-router/issues/49#issuecomment-47164572
.
ryanflorence
on 26 Jun 2014
I prefer the declarative way:
// there was some outdated code here, see below now
gaearon
on 8 Oct 2014
@gaearon boom. that's the way to do it!
mjackson
on 8 Oct 2014
@mjackson @rpflorence
I put it on NPM as react-document-title.
It really plays well with react-router's nesting:
var App = React.createClass({
render: function () {
// Use "My Web App" if no child overrides this
return (
<DocumentTitle title='My Web App'>
<this.props.activeRouteHandler />
</DocumentTitle>
);
}
});
var HomePage = React.createClass({
render: function () {
// Use "Home" while this component is mounted
return (
<DocumentTitle title='Home'>
<h1>Home, sweet home.</h1>
</DocumentTitle>
);
}
});
var NewArticlePage = React.createClass({
mixins: [LinkStateMixin],
render: function () {
// Update using value from state while this component is mounted
return (
<DocumentTitle title={this.state.title || 'Untitled'}>
<div>
<h1>New Article</h1>
<input valueLink={this.linkState('title')} />
</div>
</DocumentTitle>
);
}
});
Thanks to @pluma, react-document-title now supports server-side usage via DocumentTitle.rewind() method. So, just like react-router, it can be used on both sides.
gaearon
on 23 Oct 2014
class Layout extends React.Component {
constructor(props){
super(props);
document.title = this.props.title;
}
render(){
return(
<div>
</div>
);
}
}
then <Layout title="My Title"/> it works!
rajeshkw
on 26 Feb 2017
Hi @rajeshkw
I found better solution, that works with fetching data and Redux
import React from 'react';
export default class Layout extends React.Component {
constructor(props){
super(props);
}
componentWillUpdate(nextProps) {
document.title = nextProps.title;
}
render(){
return null;
}
}
Aeonrush
on 26 Feb 2017
How do you do this in stateless functional components? I tried this but it doesn't work:
ComponentName.componentDidMount = () => document.title = "Who's Marco?"
Where the ComponentName is something like this:
export const Life = ({sayHello="Ciao"}) => (
)
marcogreselin
on 24 May 2017
@marcogreselin , As I know we can't create lifecycle hooks in a stateless functional component, These functional components don't have backing instances, and do not have the component lifecycle methods too. So better to convert it to stateful class style component.
tmkasun
on 30 May 2017
@marcogreselin not sure if it's the right way but I believe you can do something like this.
export const Life = ({sayHello="Ciao"}) => {
document.title='Your title.';
return (
<Your JSX>
);
}
ssmith-wombatweb
on 8 Sep 2017
Another alternative - https://github.com/kodyl/react-document-meta
swapnil95
on 24 Sep 2017
Related issues
imWildCat
·
3Comments
winkler1
·
3Comments
ryansobol
·
3Comments
ackvf
·
3Comments
wzup
·
3Comments
Most helpful comment
@mjackson @rpflorence
I put it on NPM as react-document-title.
It really plays well with react-router's nesting: