diff --git a/lib/isomorphic/wrappers/html.js b/lib/isomorphic/wrappers/html.js index 78a1c52048588..d09876b7ad5d6 100644 --- a/lib/isomorphic/wrappers/html.js +++ b/lib/isomorphic/wrappers/html.js @@ -1,18 +1,55 @@ -import React, { PropTypes } from 'react' +import React, { Component } from 'react' +import { browserHistory } from 'react-router' -module.exports = React.createClass({ - propTypes: { - page: PropTypes.shape({ - data: PropTypes.shape({ - body: PropTypes.string.isRequired, - }), - }), - }, +export default class HtmlWrapper extends Component { + + propTypes = { + router: React.PropTypes.object, + } + + componentDidMount () { + this.refs.holder.addEventListener( 'click', this.onNodeClick ) + } + + componentWillUnmount () { + this.refs.holder.removeEventListener( 'click', this.onNodeClick ) + } + + onNodeClick = ( e ) => { + const node = e.target + + // Only accept links + if ( node.tagName !== 'A' ) { + return + } + + const href = node.getAttribute( 'href' ) + + // That are pointing to an internal page + // All internal links should have a slash on the start and on the end + // Example: /about/me/ + if ( ! href.match( /^\/.*\/$/ ) ) { + return + } + + // That doesn't have a data-react attribute + if ( node.getAttribute( 'data-react' ) ) { + return + } + + // Seems that we've found a link that isn't being managed by react + // Lets prevent browser default and propagation + e.preventDefault() + + // And use react-router history instead + browserHistory.push( node.href ) + } render () { - const html = this.props.page.data.body + const post = this.props.route.page.data + return ( -
+
) - }, -}) + } +}