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 1/3] 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}",

From 82fc9739bbede04525ff71346b1228c859ce7afb Mon Sep 17 00:00:00 2001
From: Maccesch <maccesch@synphonyte.com>
Date: Wed, 9 Mar 2022 03:25:40 +0000
Subject: [PATCH 2/3] updated to new way of checking path of route

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

diff --git a/packages/router/src/components/link.rs b/packages/router/src/components/link.rs
index 40248335c..6ccca6c7d 100644
--- a/packages/router/src/components/link.rs
+++ b/packages/router/src/components/link.rs
@@ -98,8 +98,8 @@ pub fn Link<'a>(cx: Scope<'a, LinkProps<'a>>) -> Element {
     let prevent_default = if outerlink { "" } else { "onclick" };
 
     let route = use_route(&cx);
-    let location = route.current_location();
-    let path = location.path();
+    let url = route.url();
+    let path = url.path();
     let active = path == cx.props.to;
     let active_class = active.then(|| {
         active_class.unwrap_or("active")

From 1a2624952a0308aa98f8b1e18340e1648fbabcbb Mon Sep 17 00:00:00 2001
From: Maccesch <maccesch@synphonyte.com>
Date: Wed, 9 Mar 2022 23:06:14 +0000
Subject: [PATCH 3/3] fixed cargo fmt

---
 packages/router/src/components/link.rs | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/router/src/components/link.rs b/packages/router/src/components/link.rs
index 6ccca6c7d..4b247be4e 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_route};
+use crate::{use_route, RouterCore};
 use dioxus_core as dioxus;
 use dioxus_core::prelude::*;
 use dioxus_core_macro::{format_args_f, rsx, Props};
@@ -101,9 +101,9 @@ pub fn Link<'a>(cx: Scope<'a, LinkProps<'a>>) -> Element {
     let url = route.url();
     let path = url.path();
     let active = path == cx.props.to;
-    let active_class = active.then(|| {
-        active_class.unwrap_or("active")
-    }).unwrap_or("");
+    let active_class = active
+        .then(|| active_class.unwrap_or("active"))
+        .unwrap_or("");
 
     cx.render(rsx! {
         a {