dom nesting validation

src/components/aside/AsideNews.tsx

@@ -33,9 +33,7 @@ const AsideNews = ({ title, date, img, category, link }: Props) => {
               <NewsCategory title={category} />
               <NewsDate date={date} />
             </div>
-            <Link to={link}>
-              <h2 className="aside-news-title">{title}</h2>
-            </Link>
+            <h2 className="aside-news-title">{title}</h2>
           </div>
         </div>
       </div>

src/components/header/SubNav.tsx

@@ -1,30 +1,30 @@
 // Modules
-import { useLocation } from 'react-router-dom';
-import { v4 as uuidv4 } from 'uuid';
-import { useDispatch, useSelector } from 'react-redux';
-import { useEffect, useState } from 'react';
+import { useLocation } from "react-router-dom";
+import { v4 as uuidv4 } from "uuid";
+import { useDispatch, useSelector } from "react-redux";
+import { useEffect, useState } from "react";
 
 // Types
-import { RootState } from '../../types/store.types';
-import { ICategoriesData } from '../../types/data.types';
+import { RootState } from "../../types/store.types";
+import { ICategoriesData } from "../../types/data.types";
 
 // Actions
-import { setActiveLink } from '../../actions/setActiveLink.action';
+import { setActiveLink } from "../../actions/setActiveLink.action";
 
 // Api
-import { Api } from '../../api/Api';
-import { url } from '../../url';
+import { Api } from "../../api/Api";
+import { url } from "../../url";
 
 // Components
-import Loader from '../global/Loader';
-import SubNavLi from './SubNavLi';
+import Loader from "../global/Loader";
+import SubNavLi from "./SubNavLi";
 
 const SubNav = () => {
-  const activeLink = useSelector<RootState, RootState['activeLink']['active']>(
-    (state) => state.activeLink.active,
+  const activeLink = useSelector<RootState, RootState["activeLink"]["active"]>(
+    (state) => state.activeLink.active
   );
-  const language = useSelector<RootState, RootState['language']['title']>(
-    (state) => state.language.title,
+  const language = useSelector<RootState, RootState["language"]["title"]>(
+    (state) => state.language.title
   );
 
   const dispatch = useDispatch();
@@ -36,7 +36,7 @@ const SubNav = () => {
   const [data, setData] = useState<ICategoriesData>();
 
   // Api
-  const api = new Api(url + '/categories');
+  const api = new Api(url + "/categories");
 
   useEffect(() => {
     api.get(data, setData);
@@ -44,7 +44,10 @@ const SubNav = () => {
 
   const location = useLocation();
   useEffect(() => {
-    if (!location.pathname.includes('category')) return;
+    if (!location.pathname.includes("category")) {
+      onClickLink(0);
+      return;
+    }
     const category = location.pathname[location.pathname.length - 1];
     onClickLink(parseInt(category));
   }, [location]);
@@ -57,7 +60,7 @@ const SubNav = () => {
             <>
               <SubNavLi
                 isNotCategory
-                dataEl={{ id: 0, name: 'Главная' }}
+                dataEl={{ id: 0, name: "Главная" }}
                 activeLink={activeLink}
                 onClickLink={onClickLink}
               />

src/components/news/News.tsx

@@ -31,9 +31,7 @@ const News = ({ id, title, text, categories, date, img }: Props) => {
         </div>
         <div className="news-info">
           <div className="news-info-inner">
-            <Link to={`/news/${id}`}>
-              <h2 className="news-title">{title}</h2>
-            </Link>
+            <h2 className="news-title">{title}</h2>
             <div className="news-status">
               <div className="news-status-left">
                 {categories.map((category) => {