Comments (13)
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>
);
}
});
from react-router.
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.
from react-router.
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;
}
}
from react-router.
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!
from react-router.
@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>
);
}
from react-router.
Another alternative - https://github.com/kodyl/react-document-meta
from react-router.
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. :)
from react-router.
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
#49 (comment)
.
from react-router.
I prefer the declarative way:
// there was some outdated code here, see below now
from react-router.
@gaearon boom. that's the way to do it!
from react-router.
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.
from react-router.
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"}) => (
)
from react-router.
@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.
from react-router.
Related Issues (20)
- [Docs]: Tutorial missing imports within 'contacts.js'. [ "match-sorter" , "localforage" , "sort-by" ] HOT 1
- [Bug]: history.listen not triggered on hash changes HOT 1
- [Bug]: Update comments recommending to use polyfill.io HOT 3
- [Docs]: Nested Routes are essentially undocumented HOT 5
- [Bug]: unstable_patchRoutesOnMiss is superseded by "*" (404) HOT 3
- [Bug]: unstable_patchRoutesOnMiss leaf ignored when patching sub-trees asyncronously HOT 3
- [Bug]: Functional updates to `useSearchParams` don't get updated values HOT 2
- Update to isbot@5 HOT 1
- [Bug]: `unstable_patchRoutesOnMiss` remote module error-handling HOT 13
- [Bug]: useMatch does not decode params HOT 4
- [Bug]: Could not resolve './utils' from packages/router/index.ts HOT 2
- [Bug]: Link when used with Outlet is not working. It is routing to error page when clicked. HOT 1
- [Bug]: setSearchParams from useSearchParams remove hash HOT 1
- [Bug]: HashRouter need to wrapped twice HOT 1
- [Docs]: docs show reach/router instead of react/router HOT 2
- [Bug]: "react-router-dom-v5-compat" <CompatRouter> doesn't unsubscribe from history potentially causing tests to memory leak HOT 2
- [Bug]: child loader redirect overrides parent loader error HOT 7
- [Bug]: v7_partialHydration with unstable_patchRoutesOnMiss: hydrateFallbackElement not shown on patched routes HOT 3
- [Bug]: Relative path does not work as expected in outlets HOT 1
- [Bug]: useNavigate causes component to rerender HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-router.