From 5ebaa8886b9fe3a31da4f0a62a2ef9e87826007f Mon Sep 17 00:00:00 2001
From: wlockiv <walker.b.lockard@gmail.com>
Date: Wed, 28 Nov 2018 04:58:45 -0600
Subject: [PATCH] docs(gatsby-link): don't pass activeClassName prop to html
 anchor (#10107)

Without destructuring `activeClassName`, the <a> element will receive the prop and react will throw an error along the lines of `React does not recognize the `activeClassName` prop on a DOM element.`.

<!--
  Q. Which branch should I use for my pull request?
  A. Use `master` branch (probably).

  Q. Which branch if my change is a bug fix for Gatsby v1?
  A. In this case, you should use the `v1` branch

  Q. Which branch if I'm still not sure?
  A. Use `master` branch. Ask in the PR if you're not sure and a Gatsby maintainer will be happy to help :)

  Note: We will only accept bug fixes for Gatsby v1. New features should be added to Gatsby v2.

  Learn more about contributing: https://www.gatsbyjs.org/docs/how-to-contribute/
-->
---
 docs/docs/gatsby-link.md | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/docs/docs/gatsby-link.md b/docs/docs/gatsby-link.md
index 81177ecd8507e..33a479b629d79 100644
--- a/docs/docs/gatsby-link.md
+++ b/docs/docs/gatsby-link.md
@@ -136,7 +136,9 @@ following may be a good starting point:
 ```jsx
 import { Link as GatsbyLink } from "gatsby"
 
-const Link = ({ children, to, ...other }) => {
+// Since DOM elements <a> cannot receive activeClassName,
+// destructure the prop here and pass it only to GatsbyLink
+const Link = ({ children, to, activeClassName, ...other }) => {
   // Tailor the following test to your environment.
   // This example assumes that any internal link (intended for Gatsby)
   // will start with exactly one slash, and that anything else is external.
@@ -145,7 +147,7 @@ const Link = ({ children, to, ...other }) => {
   // Use Gatsby Link for internal links, and <a> for others
   if (internal) {
     return (
-      <GatsbyLink to={to} {...other}>
+      <GatsbyLink to={to} activeClassName={activeClassName} {...other}>
         {children}
       </GatsbyLink>
     )
@@ -164,7 +166,7 @@ export default Link
 
 You can similarly check for file downloads:
 
-```
+```jsx
   const file = /\.[0-9a-z]+$/i.test(to)
 
   ...