Component to handle nested URLs for linking

VendorContextLink.tsx

import React from 'react'
import { Link, LinkProps, useRouteMatch } from 'react-router-dom'

const VendorContextLink = (props: LinkProps) => {
  const match = useRouteMatch<{ vendorId: string }>('/vendors/:vendorId')

  if (!match) {
    return <Link {...props} />
  }

  const modifiedTo = typeof props.to === 'string' ? props.to : {
    pathanme: `${match.url}/${props.to}`,
    ...props.to
  } 

  return (
    <Link {...props} to={modifiedTo} />
  )
}

export default VendorContextLink