From ef82ffd2176d0d8d21096ebbf4e3b8a5638b72bd Mon Sep 17 00:00:00 2001
From: Maccesch <maccesch@synphonyte.com>
Date: Sun, 6 Mar 2022 23:17:24 +0000
Subject: [PATCH] added active class to router link

---
 packages/router/src/components/link.rs | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/packages/router/src/components/link.rs b/packages/router/src/components/link.rs
index 3c03bb3bf..40248335c 100644
--- a/packages/router/src/components/link.rs
+++ b/packages/router/src/components/link.rs
@@ -1,6 +1,6 @@
 use std::sync::Arc;
 
-use crate::RouterCore;
+use crate::{RouterCore, use_route};
 use dioxus_core as dioxus;
 use dioxus_core::prelude::*;
 use dioxus_core_macro::{format_args_f, rsx, Props};
@@ -26,6 +26,12 @@ pub struct LinkProps<'a> {
     #[props(default, strip_option)]
     pub class: Option<&'a str>,
 
+    /// Set the class added to the inner link when the current route is the same as the "to" route.
+    ///
+    /// By default set to `"active"`.
+    #[props(default, strip_option)]
+    pub active_class: Option<&'a str>,
+
     /// Set the ID of the inner link ['a'](https://www.w3schools.com/tags/tag_a.asp) element.
     ///
     /// This can be useful when styling the inner link element.
@@ -83,6 +89,7 @@ pub fn Link<'a>(cx: Scope<'a, LinkProps<'a>>) -> Element {
         external,
         new_tab,
         children,
+        active_class,
         ..
     } = cx.props;
 
@@ -90,10 +97,18 @@ pub fn Link<'a>(cx: Scope<'a, LinkProps<'a>>) -> Element {
     let outerlink = (*autodetect && is_http) || *external;
     let prevent_default = if outerlink { "" } else { "onclick" };
 
+    let route = use_route(&cx);
+    let location = route.current_location();
+    let path = location.path();
+    let active = path == cx.props.to;
+    let active_class = active.then(|| {
+        active_class.unwrap_or("active")
+    }).unwrap_or("");
+
     cx.render(rsx! {
         a {
             href: "{to}",
-            class: format_args!("{}", class.unwrap_or("")),
+            class: format_args!("{} {}", class.unwrap_or(""), active_class),
             id: format_args!("{}", id.unwrap_or("")),
             title: format_args!("{}", title.unwrap_or("")),
             prevent_default: "{prevent_default}",