Improve links

Use Next.js router links instead of the ordinary `<a>` tags.

packages/react-common-docs/src/components/Nav/Nav.tsx

@@ -42,6 +42,7 @@ const Nav: React.FC<Props> = ({
         {
           (data as (string | object | null | undefined)[]).map(d => (
             <Nav
+              key={JSON.stringify(d)}
               data={d}
             />
           ))
@@ -61,6 +62,7 @@ const Nav: React.FC<Props> = ({
           {
             (value as (string | object | null | undefined)[]).map(v => (
               <Nav
+                key={JSON.stringify(v)}
                 data={v}
               />
             ))
@@ -76,6 +78,7 @@ const Nav: React.FC<Props> = ({
         {
           // @ts-ignore
           <NavLink
+            href={value as string}
             title={key}
             enclosingComponent={Container}
           />
@@ -91,6 +94,7 @@ const Nav: React.FC<Props> = ({
       {
         // @ts-ignore
         <NavLink
+          href={data as string}
           title={data as string}
           enclosingComponent={Container}
         />

packages/react-common-docs/src/components/Props/Props.tsx

@@ -195,7 +195,9 @@ const getPropTypeHtml = propType => {
       let currentToken
       if (t.trim().startsWith('"') && t.trim().endsWith('"')) {
         currentToken = (
-          <React.Fragment>
+          <React.Fragment
+            key={t}
+          >
             <span
               style={punctuation.style}
             >
@@ -216,6 +218,7 @@ const getPropTypeHtml = propType => {
       } else if ('any string boolean number symbol unknown object bigint'.split(' ').includes(t)) {
         currentToken = (
           <span
+            key={t}
             style={keyword.style}
           >
             {t}
@@ -224,6 +227,7 @@ const getPropTypeHtml = propType => {
       } else if ('null'.split(' ').includes(t)) {
         currentToken = (
           <span
+            key={t}
             style={keyword.style}
           >
             {t}
@@ -232,6 +236,7 @@ const getPropTypeHtml = propType => {
       } else if ('true false'.split(' ').includes(t)) {
         currentToken = (
           <span
+            key={t}
             style={boolean.style}
           >
             {t}
@@ -240,6 +245,7 @@ const getPropTypeHtml = propType => {
       } else if (!isNaN(Number(t))) {
         currentToken = (
           <span
+            key={t}
             style={number.style}
           >
             {t}
@@ -248,6 +254,7 @@ const getPropTypeHtml = propType => {
       } else {
         currentToken = (
           <span
+            key={t}
             style={type.style}
           >
             {t}
@@ -257,6 +264,7 @@ const getPropTypeHtml = propType => {
       return [
         ...tt,
         i > 0 && <span
+          key={`**separator:${t}**`}
           style={operator.style}
         >
           |
@@ -314,7 +322,9 @@ const Props: React.FC<Props> = ({ of: ofAttr }) => {
               )
               : undefined
             return (
-              <HeaderRow>
+              <HeaderRow
+                key={name}
+              >
                 <MainBodyCell>
                   <Code>
                     {getPropNameHtml(propName, propType)}

packages/react-common-docs/src/components/Sidebar/Sidebar.tsx

@@ -98,7 +98,7 @@ const RepoLink = styled('a')({
 
 const propTypes = {
   data: PropTypes.shape({
-    nav: PropTypes.object,
+    nav: PropTypes.array,
   }),
   brand: PropTypes.elementType,
   initialTheme: PropTypes.string,
@@ -187,7 +187,7 @@ const Sidebar: React.FC<Props> = ({
               <RepoLink
                 href={pkg.repository}
                 target="_blank"
-                rel="noopener noreferer"
+                rel="noopener noreferrer"
               >
                 <Icon
                   name="code"

packages/react-common-docs/src/pages/_app.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react'
+import Link from 'next/link'
 import { MDXProvider } from '@mdx-js/react'
 import Head from 'next/head'
 import styled from 'styled-components'
@@ -42,6 +43,31 @@ const App: React.FC<AppProps> = ({
       <Container>
         <MDXProvider
           components={{
+            a: ({ href, children, ...etcProps }) => {
+              if (href.startsWith('http://') || href.startsWith('https://') || href.startsWith('//')) {
+                return (
+                  <a
+                    {...etcProps}
+                    href={href}
+                    target="_blank"
+                    rel="noreferrer noopener"
+                  >
+                    {children}
+                  </a>
+                )
+              }
+              return (
+                <Link
+                  href={href}
+                  passHref
+                  {...etcProps}
+                >
+                  <a>
+                    {children}
+                  </a>
+                </Link>
+              )
+            },
             pre: CodeBlock,
           }}
         >