Skip to content

Instantly share code, notes, and snippets.

@ryanflorence
Last active May 7, 2017 15:11
Show Gist options
  • Save ryanflorence/032dc66a4db0458527c39121cf40b2c2 to your computer and use it in GitHub Desktop.
Save ryanflorence/032dc66a4db0458527c39121cf40b2c2 to your computer and use it in GitHub Desktop.
// something like:
<BundleLink to="/profile" onLoadStart={() => {
// throw a spinner up on the "old" page while we load
this.setState({ navigating: true })
}}>Profile</BundleLink>
<BundleLink to="/dash" prefetch={true}>Dashboard</BundleLink>
///////////////////////////////////////////////////////
const BUNDLED_ROUTES = {
'/profile': () => import('./Profile'),
// etc.
}
class BundleLink {
componentDidMount() {
// could be smarter, do it as the mouse gets close,
// or keyboard gets focus
if (this.props.prefetch) {
this.load()
}
}
handleClick(e) {
// check if right click, defaultPrevented, etc. first
this.load()
}
load() {
const { to, history, onLoad } = this.props
onLoadStart()
BUNDLED_ROUTES[to]().then(() => {
history.push(to)
})
}
render() {
const { history, match, onLoad, location, ...props } = this.props
return (
<Link {...props} onClick={this.handleClick}/>
)
}
}
export default withRouter(BundleLink)
///////////////////////////////////////
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment