react <Link> component in markdown doc

Markdownで記事を書いてそれをhtmlへrenderするとhyper linkが<a>タグになってしまいます。 そのlinkをクリックすろとそのページ全体がreloadされます。というのはReact application自体がreloadされてしまう事態になります。 それを防ぐためには markdownの linkを React(router or nextjs)の <Link>へ変換する必要があります。<Link>は内部的には window.history.pushState()を使いますのBrowserのページ遷移が実際には行われないですね。その代わりにReactでURLに対応するcomponentをすり替え表示する実装になっています。 こちらのサイトでは react-markdown を用いて mdをrederingしています。以下のようにすることでmarkdown linkを <a>ではなく<Link>になるようにすることができます。

Markdown형식으로 쓴 포스트들은 표시하기 위해서 html로 변환되면 link가 <a>로 렌더링됩니다. 그래서 이 링크를 클릭하거나 하면 페이지가 전체가 리로드 되는데 그러면 react application도 0에서 부터 새로 실행되게 됩니다(페이지 전환 에니메이션 조차도 실해되지 못하죠). 이를 해결하려면 markdown에서 html변환할 때 <Link>사용하도록 해서 해결이 가능합니다. 제 사이트는 markdown 렌더링에 react-markdown 을 사용하고 있습니다. 그래서 다름과 같이해서 markdown link가 <Link>로 렌더링 되도록 하였습니다.

const content = `
# markdown コンテンツ
[ページ名](/page1)
`

<ReactMarkdown
  components={{
    a: props => <Link href={props.href!}>{props.children} </Link>
  }}>
  {content}
</ReactMarkdown>