_target="blank" for external URLs

README.md

@@ -89,7 +89,7 @@ Here is a simple table that reproduces the error on this page (when `window.inne
 
 
 [react-data-table-component]: https://github.com/jbetancur/react-data-table-component
-[localhost:3000]: http://localhost:3000
+[localhost:3000]: http://localhost:3000/
 
 [react#418]: https://react.dev/errors/418?invariant=418
 

pages/index.tsx

@@ -1,21 +1,29 @@
 import DataTable from "react-data-table-component";
-import ReactMarkdown from "react-markdown";
+import ReactMarkdown, { Components } from "react-markdown";
 import fs from "fs";
+import Link from "next/link";
 
 export function getStaticProps() {
   return { props: { readme: fs.readFileSync("README.md").toString() } }
 }
 
+const components: Components = {
+  a: ({ href, children }) =>
+      <Link href={href || "#"} target={href?.startsWith("http") ? "_blank" : "_self"}>
+        {children}
+      </Link>
+}
+
 const Index = ({ readme }: { readme: string }) =>
     <div className={"markdown-body"}>
-        <ReactMarkdown>{readme}</ReactMarkdown>
-        <DataTable
-            columns={[ { name: "Str" }, { name: "Num" } ]}
-            data={[ { Str: "A", Num: 1 } ]}
-            // This line causes a hydration error in the pagination footer "nav" element (iff the
-            // browser window is ≥599px wide); commenting this line fixes it.
-            pagination
-        />
-      </div>
+      <ReactMarkdown components={components}>{readme}</ReactMarkdown>
+      <DataTable
+          columns={[ { name: "Str" }, { name: "Num" } ]}
+          data={[ { Str: "A", Num: 1 } ]}
+          // This line causes a hydration error in the pagination footer "nav" element (iff the
+          // browser window is ≥599px wide); commenting this line fixes it.
+          pagination
+      />
+    </div>
 
 export default Index