Creating partially active links or active trails with React / Gatsby
Ever needed to create active links that belong to a parent link and make sure the parent is still active? In Gatsby you can use the tag which extends @reach/router. By default you could access the isPartiallyCurrent props. Just make sure there is a /blog page and it's children have an url like /blog/whatever-blog-1.<Link
getProps={({ isPartiallyCurrent }) =>
isPartiallyCurrent ? { className: "active" } : null
}
to={"/blog}
>
Blog
</Link>
Custom implementation of active parents
If you need to create some sort of logic however that isn't quite there by default you could just add it in plain Javascript. In @reach/router/index.js there is a prop location in getProps which can be used instead of window.location which breaks the build process of Gatsby.

const whatLocation = props => {
const currentLocation = props.pathname
if (currentLocation.includes("blog")) {
return { className: "active" }
}
}
<Link
to={
"/blog/another-blog"
}
/* @see @reach/router/index.js for location and pass it to the function and return active className if true */
getProps={({ location }) => whatLocation(location)}
>
Another blog
</Link>