Replace useMatches with useParams in LocaleLink and NavLocaleLink components (#454)

Author: ttizze

web/app/components/LocaleLink.tsx

@@ -1,11 +1,5 @@
 // LocaleLink.tsx
-import { Link, useMatches } from "@remix-run/react";
-
-function useRootData() {
-	const matches = useMatches();
-	const rootMatch = matches.find((match) => match.id === "root");
-	return rootMatch?.data as { locale: string } | undefined;
-}
+import { Link, useParams } from "@remix-run/react";
 
 export function LocaleLink({
 	to,
@@ -16,8 +10,7 @@ export function LocaleLink({
 	children: React.ReactNode;
 	className?: string;
 }) {
-	const rootData = useRootData();
-	const locale = rootData?.locale ?? "en";
+	const { locale } = useParams();
 
 	const path = `/${locale}${to}`;
 

web/app/components/NavLocaleLink.tsx

@@ -1,10 +1,4 @@
-import { NavLink, type NavLinkProps, useMatches } from "@remix-run/react";
-
-function useRootData() {
-	const matches = useMatches();
-	const rootMatch = matches.find((match) => match.id === "root");
-	return rootMatch?.data as { locale?: string } | undefined;
-}
+import { NavLink, type NavLinkProps, useParams } from "@remix-run/react";
 
 // NavLinkProps を継承
 type NavLocaleLinkProps = Omit<NavLinkProps, "to"> & {
@@ -17,20 +11,13 @@ export function NavLocaleLink({
 	children,
 	...rest
 }: NavLocaleLinkProps) {
-	const rootData = useRootData();
-	const locale = rootData?.locale ?? "en";
+	const { locale } = useParams();
 
-	// 先頭のスラッシュを削除したうえで "/:locale" を付与
 	const normalized = to.startsWith("/") ? to.slice(1) : to;
 	const path = `/${locale}/${normalized}`;
 
 	return (
-		<NavLink
-			to={path}
-			// className が「文字列」or「コールバック」どちらでもOK
-			className={className}
-			{...rest}
-		>
+		<NavLink to={path} className={className} {...rest}>
 			{children}
 		</NavLink>
 	);