react-router, composition vs inheritance

ProtectedLink.jsx

import React from 'react'
import { ProtectionConsumer } from './ProtectionContext'
import { Link } from 'react-router-dom'

// Inheritance
export class ProtectedLinkInherited extends Link {
  render() {
    return (
      <ProtectionConsumer>
        {({ protected }) => {
          if (!protected) { return this.props.children }
          return super.render()
        }}
      </ProtectionConsumer>
    )
  }
}

// vs Composition
export class ProtectedLinkComposed extends React.Component {
  render() {
    return (
      <ProtectionConsumer>
        {({ protected }) => {
          if (!protected) { return this.props.children }
          return <Link {...this.props} />
        }}
      </ProtectionConsumer>
    )
  }
}

ProtectedRoute.jsx

import React from 'react'
import { ProtectionConsumer } from './ProtectionContext'
import { Route } from 'react-router-dom'

// Inheritance
export class ProtectedRouteInherited extends Route {
    render() {
        return (
            <ProtectionConsumer>
                {({ protected }) => {
                    if (!protected) { return null }
                    return super.render()
                }}
            </ProtectionConsumer>
        )
    }
}

// vs Composition, does not work inside Switch
export class ProtectedRouteComposed extends React.Component {
    render() {
        return (
            <ProtectionConsumer>
                {({ protected }) => {
                    if (!protected) { return null }
                    return <Route {...this.props} />
                }}
            </ProtectionConsumer>
        )
    }
}