fixed query state

src/components/Articles/Categories/Categories.js

@@ -1,10 +1,17 @@
 import React from 'react';
+import { useLocation } from '@reach/router'
 import { Link } from 'gatsby'
 
-const Categories = ({ children, pathname, setQuery }) => {
+const Categories = ({ children, setQuery = () => null }) => {
+  const { search, pathname } = useLocation()
+
   return (
     <div className="articles-categories">
-      <div className={pathname === `/articles` ? 'tag-item active' : 'tag-item'}>
+      <div className={
+        pathname === `/articles` || (pathname === `/articles/` && search === '')
+        ? 'tag-item active' 
+        : 'tag-item'
+      }>
         <Link onClick={() => setQuery('')} to='/articles'>Все</Link>
       </div>
       {children}

src/components/Articles/Categories/CategoryItem.js

@@ -7,7 +7,7 @@ import slugify from '../../../helpers/slugify'
 const CategoryItem = ({ title }) => {
   const { pathname } = useLocation()
   return (
-    <div className={pathname === `/category/${slugify(title)}` ? 'tag-item active' : 'tag-item'}>
+    <div className={pathname === `/category/${slugify(title)}` || pathname === `/category/${slugify(title)}/` ? 'tag-item active' : 'tag-item'}>
       <Link to={`/category/${slugify(title)}`}>{title}</Link>
     </div>
   )

src/pages/articles.js

@@ -49,7 +49,7 @@ const ArticlesPage = ({ data: { allMarkdownRemark: edges }, }) => {
                 <div className="articles-heading">
                   <h1>Статьи</h1>
                 </div>
-                <Categories pathname={pathname} setQuery={setQuery}>
+                <Categories setQuery={setQuery}>
                   {categories.map(({ node }, i) => <CategoryItem key={i} title={node.frontmatter.title} />)}
                 </Categories>
                 <Search allArticles={allArticles.edges} filterArticles={filterArticles} articlesLength={edges.edges.length} resultsLength={filtredArticles.length} query={query} setQuery={setQuery} setFiltredArticles={setFiltredArticles} />