15行代码实现 React-router-dom 中的 Link 组件

import React from 'react'
import { useHistory } from "react-router-dom"

interface LinkProps {
  to: string;
}

export const AsLink: React.FC<LinkProps> = ({ children, to }) => {
  const history = useHistory()
  return (
    <a href={to} onClick={() => { history.push(to) }}>
      { children }
    </a>
  )
}

本质就是原生页面的 a 标签，通过 history 的 push 方法，将路由压入栈中。