Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit630fd7c

Browse files
authored
fix: navlink investigation (#16073)
Normally the react router Navlink should normalize the url path andmatch with or without a / on the end of the path.This is a fix to use useMatch() to explicitly see if the current path isa match to an href to determine whether to apply active styling to thenavlink
1 parent20c36a6 commit630fd7c

File tree

1 file changed

+10
-9
lines changed

1 file changed

+10
-9
lines changed

‎site/src/components/Sidebar/Sidebar.tsx

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import type { CSSObject, Interpolation, Theme } from "@emotion/react";
33
import{Stack}from"components/Stack/Stack";
44
import{typeClassName,useClassName}from"hooks/useClassName";
55
importtype{ElementType,FC,ReactNode}from"react";
6-
import{Link,NavLink}from"react-router-dom";
6+
import{Link,NavLink,useMatch}from"react-router-dom";
77
import{cn}from"utils/cn";
88

99
interfaceSidebarProps{
@@ -61,18 +61,19 @@ export const SettingsSidebarNavItem: FC<SettingsSidebarNavItemProps> = ({
6161
href,
6262
end,
6363
})=>{
64+
// useMatch is necessary to verify if the current path matches the href on the initial render of the route
65+
constmatchResult=useMatch(href);
66+
6467
return(
6568
<NavLink
6669
end={end}
6770
to={href}
68-
className={({ isActive})=>
69-
cn(
70-
"relative text-sm text-content-secondary no-underline font-medium py-2 px-3 hover:bg-surface-secondary rounded-md transition ease-in-out duration-150",
71-
{
72-
"font-semibold text-content-primary":isActive,
73-
},
74-
)
75-
}
71+
className={cn(
72+
"relative text-sm text-content-secondary no-underline font-medium py-2 px-3 hover:bg-surface-secondary rounded-md transition ease-in-out duration-150",
73+
{
74+
"font-semibold text-content-primary":matchResult!==null,
75+
},
76+
)}
7677
>
7778
{children}
7879
</NavLink>

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp