Merge pull request #294 from Synphonyte/master

packages/router/src/components/link.rs

@@ -1,6 +1,6 @@
 use std::sync::Arc;
 
-use crate::RouterCore;
+use crate::{use_route, RouterCore};
 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,17 +89,26 @@ pub fn Link<'a>(cx: Scope<'a, LinkProps<'a>>) -> Element {
         external,
         new_tab,
         children,
+        active_class,
         ..
     } = cx.props;
 
     let is_http = to.starts_with("http") || to.starts_with("https");
     let outerlink = (*autodetect && is_http) || *external;
     let prevent_default = if outerlink { "" } else { "onclick" };
 
+    let route = use_route(&cx);
+    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("");
+
     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}",