active links

src/components/Articles/Search/Search.js

@@ -1,15 +1,10 @@
 import React from 'react'
 
 const Search = ({ articlesLength }) => {
-	const [length, setLength] = React.useState(0)
-	React.useEffect(() => {
-		setLength(articlesLength)
-	}, [articlesLength])
-	
 	return (
 		<div className="articles-search">
 			<input placeholder="Напишите сюда чтобы отфильтровать статьи" type="text" />
-			<span>{length}</span>
+			<span>{articlesLength}</span>
     </div>
 	)
 }

src/components/Header/Header.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import { useLocation } from '@reach/router'
 import PropTypes from 'prop-types'
 import { Link } from 'gatsby'
 import ThemeContext from '../../context/ThemeContext'
@@ -13,6 +14,7 @@ import SunIcon from '../../images/sun-icon.svg'
 const Header = ({ title, menuLinks }) => {
   const [isScrolled, setIsScrolled] = React.useState(false)
   const [isMobileOpen, setIsMobileOpen] = React.useState(false)
+  const { pathname } = useLocation()
 
   React.useEffect(() =>  {
     isMobileOpen ? document.body.style.overflowY = 'hidden' : document.body.style.overflowY = ''
@@ -26,7 +28,7 @@ const Header = ({ title, menuLinks }) => {
   const renderLinks = () => {
     return (
       <ul>
-        {menuLinks.map((page, i) => <li key={i}><Link to={page.link}>{page.name}</Link></li>)}
+        {menuLinks.map((page, i) => <li key={i} className={page.link === pathname ? 'active' : null}><Link to={page.link}>{page.name}</Link></li>)}
       </ul>
     )
   }

src/templates/articleTemplate.js

@@ -6,7 +6,7 @@ import MoreArticles from '../components/Articles/MoreArticles/MoreArticles'
 import Newsletter from '../components/Newsletter/Newsletter'
 import { graphql } from "gatsby"
 
-export default function Template ({ data }) {
+const articleTemplate = ({ data }) => {
   const { markdownRemark } = data
   const { frontmatter, html } = markdownRemark
 
@@ -52,4 +52,6 @@ export const pageQuery = graphql`
       }
     }
   }
-`
+`
+
+export default articleTemplate

src/templates/categoryTemplate.js

@@ -8,7 +8,7 @@ import Categories from '../components/Articles/Categories/Categories'
 import Offers from '../components/Offers/Offers'
 import Newsletter from '../components/Newsletter/Newsletter'
 
-const CategoryPage = ({ data: { allMarkdownRemark: edges }, pathContext: { title } }) => {
+const CategoryPage = ({ data: { allMarkdownRemark: edges }, pageContext: { title } }) => {
   return (
     <Layout>
       <SEO title={title} />