Fixing nav-link

diff --git a/src/shared/components/app/footer.tsx b/src/shared/components/app/footer.tsx
index de70ac5c821f2ca8753957e0f38ef564df3c2cf7..d4edd78cb7207e12fbd035afe51a8b5735fbe6e8 100644 (file)
--- a/src/shared/components/app/footer.tsx
+++ b/src/shared/components/app/footer.tsx
@@ -1,5 +1,5 @@
 import { Component } from "inferno";
-import { Link } from "inferno-router";
+import { NavLink } from "inferno-router";
 import { GetSiteResponse } from "lemmy-js-client";
 import { i18n } from "../../i18next";
 import { docsUrl, joinLemmyUrl, repoUrl } from "../../utils";
@@ -28,15 +28,15 @@ export class Footer extends Component<FooterProps, any> {
               <span class="nav-link">BE: {this.props.site.version}</span>
             </li>
             <li className="nav-item">
-              <Link className="nav-link" to="/modlog">
+              <NavLink className="nav-link" to="/modlog">
                 {i18n.t("modlog")}
-              </Link>
+              </NavLink>
             </li>
             {this.props.site.federated_instances && (
               <li class="nav-item">
-                <Link className="nav-link" to="/instances">
+                <NavLink className="nav-link" to="/instances">
                   {i18n.t("instances")}
-                </Link>
+                </NavLink>
               </li>
             )}
             <li class="nav-item">

diff --git a/src/shared/components/app/navbar.tsx b/src/shared/components/app/navbar.tsx
index 392424eb1ee826d3eda90facb9d08346d3fc11f2..0f8d64713a22d43b040e2e81af0fd7b9f8a5b299 100644 (file)
--- a/src/shared/components/app/navbar.tsx
+++ b/src/shared/components/app/navbar.tsx
@@ -1,5 +1,5 @@
 import { Component, createRef, linkEvent, RefObject } from "inferno";
-import { Link } from "inferno-router";
+import { NavLink } from "inferno-router";
 import {
   CommentResponse,
   GetReportCount,
@@ -155,7 +155,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
       <nav class="navbar navbar-expand-lg navbar-light shadow-sm p-0 px-3">
         <div class="container">
           {this.props.site_res.site_view && (
-            <Link
+            <NavLink
               to="/"
               onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
               title={
@@ -171,13 +171,13 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                 />
               )}
               {this.props.site_res.site_view.site.name}
-            </Link>
+            </NavLink>
           )}
           {this.state.isLoggedIn && (
             <>
               <ul class="navbar-nav ml-auto">
                 <li className="nav-item">
-                  <Link
+                  <NavLink
                     to="/inbox"
                     className="p-1 navbar-toggler nav-link border-0"
                     onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
@@ -192,13 +192,13 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                         {numToSI(this.state.unreadInboxCount)}
                       </span>
                     )}
-                  </Link>
+                  </NavLink>
                 </li>
               </ul>
               {UserService.Instance.myUserInfo?.moderates.length > 0 && (
                 <ul class="navbar-nav ml-1">
                   <li className="nav-item">
-                    <Link
+                    <NavLink
                       to="/reports"
                       className="p-1 navbar-toggler nav-link border-0"
                       onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
@@ -213,7 +213,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                           {numToSI(this.state.unreadReportCount)}
                         </span>
                       )}
-                    </Link>
+                    </NavLink>
                   </li>
                 </ul>
               )}
@@ -233,17 +233,17 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
           >
             <ul class="navbar-nav my-2 mr-auto">
               <li class="nav-item">
-                <Link
+                <NavLink
                   to="/communities"
                   className="nav-link"
                   onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
                   title={i18n.t("communities")}
                 >
                   {i18n.t("communities")}
-                </Link>
+                </NavLink>
               </li>
               <li class="nav-item">
-                <Link
+                <NavLink
                   to={{
                     pathname: "/create_post",
                     prevPath: this.currentLocation,
@@ -253,18 +253,18 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                   title={i18n.t("create_post")}
                 >
                   {i18n.t("create_post")}
-                </Link>
+                </NavLink>
               </li>
               {this.canCreateCommunity && (
                 <li class="nav-item">
-                  <Link
+                  <NavLink
                     to="/create_community"
                     className="nav-link"
                     onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
                     title={i18n.t("create_community")}
                   >
                     {i18n.t("create_community")}
-                  </Link>
+                  </NavLink>
                 </li>
               )}
               <li class="nav-item">
@@ -280,14 +280,14 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
             <ul class="navbar-nav my-2">
               {this.canAdmin && (
                 <li className="nav-item">
-                  <Link
+                  <NavLink
                     to="/admin"
                     className="nav-link"
                     onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
                     title={i18n.t("admin_settings")}
                   >
                     <Icon icon="settings" />
-                  </Link>
+                  </NavLink>
                 </li>
               )}
             </ul>
@@ -328,7 +328,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
               <>
                 <ul class="navbar-nav my-2">
                   <li className="nav-item">
-                    <Link
+                    <NavLink
                       className="nav-link"
                       to="/inbox"
                       onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
@@ -343,13 +343,13 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                           {numToSI(this.state.unreadInboxCount)}
                         </span>
                       )}
-                    </Link>
+                    </NavLink>
                   </li>
                 </ul>
                 {UserService.Instance.myUserInfo?.moderates.length > 0 && (
                   <ul class="navbar-nav my-2">
                     <li className="nav-item">
-                      <Link
+                      <NavLink
                         className="nav-link"
                         to="/reports"
                         onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
@@ -364,7 +364,7 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                             {numToSI(this.state.unreadReportCount)}
                           </span>
                         )}
-                      </Link>
+                      </NavLink>
                     </li>
                   </ul>
                 )}
@@ -395,24 +395,24 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
                         )}
                       >
                         <li className="nav-item">
-                          <Link
+                          <NavLink
                             to={`/u/${UserService.Instance.myUserInfo.local_user_view.person.name}`}
                             className="nav-link"
                             title={i18n.t("profile")}
                           >
                             <Icon icon="user" classes="mr-1" />
                             {i18n.t("profile")}
-                          </Link>
+                          </NavLink>
                         </li>
                         <li className="nav-item">
-                          <Link
+                          <NavLink
                             to="/settings"
                             className="nav-link"
                             title={i18n.t("settings")}
                           >
                             <Icon icon="settings" classes="mr-1" />
                             {i18n.t("settings")}
-                          </Link>
+                          </NavLink>
                         </li>
                         <li>
                           <hr class="dropdown-divider" />
@@ -435,24 +435,24 @@ export class Navbar extends Component<NavbarProps, NavbarState> {
             ) : (
               <ul class="navbar-nav my-2">
                 <li className="nav-item">
-                  <Link
+                  <NavLink
                     to="/login"
                     className="nav-link"
                     onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
                     title={i18n.t("login")}
                   >
                     {i18n.t("login")}
-                  </Link>
+                  </NavLink>
                 </li>
                 <li className="nav-item">
-                  <Link
+                  <NavLink
                     to="/signup"
                     className="nav-link"
                     onMouseUp={linkEvent(this, this.handleHideExpandNavbar)}
                     title={i18n.t("sign_up")}
                   >
                     {i18n.t("sign_up")}
-                  </Link>
+                  </NavLink>
                 </li>
               </ul>
             )}