React-RouterのuseOutletContextについて
解決したいこと
https://reactrouter.com/en/main/hooks/use-outlet-context
React-Router-DomのuseOutletContextを使いたいのですが、上記リンク先で公式の提供するtypescriptのコードについて違和感があります。
該当するソースコード
import * as React from "react";
import type { User } from "./types";
import { Outlet, useOutletContext } from "react-router-dom";
type ContextType = { user: User | null };
export default function Dashboard() {
const [user, setUser] = React.useState<User | null>(null);
return (
<div>
<h1>Dashboard</h1>
<Outlet context={{ user } satisfies ContextType} />
</div>
);
}
export function useUser() {
return useOutletContext<ContextType>();
}
import { useUser } from "../dashboard";
export default function DashboardMessages() {
const { user } = useUser();
return (
<div>
<h2>Messages</h2>
<p>Hello, {user.name}!</p>
</div>
);
}
公式が提供するリファレンスを否定するなんて恐れ多いことはしたくないのですが、色々と改善点があるように思うのです(もしくは私が最新版のuseOutletContextのページを参照できていない可能性もあります。検索した限りでは見つからなかったのですが、どなたか最新版をページをご存じでしたら教えてください)
- React.useStateのような書き方はReact16.8以降ではする必要がない。このリファレンスはそもそも最新版に合わせてアップデートされていない。
- "./types"とあるが、該当のファイルがコード中に含まれていない(これは或いは意図的かもしれませんが)
- import * as React from "react";のような書き方より、import React from 'react'のような書き方の方が一般的である。
- satisfiesの部分は不要である。
なので、公式リファレンスを今の形に修正するなら、以下のようなコードの書きぶりになると思います。簡略化のため、userのtypeはとりあえずstring型とします。
import React, { useState } from "react";
import { Outlet, useOutletContext } from "react-router-dom";
type ContextType = { user: string | null };
export default function Dashboard() {
const [user, setUser] = useState<string | null>(null);
return (
<div>
<h1>Dashboard</h1>
<Outlet context={{ user }} />
</div>
);
}
export function useUser() {
return useOutletContext<ContextType>();
}
import { useUser } from "../dashboard";
export default function DashboardMessages() {
const { user } = useUser();
return (
<div>
<h2>Messages</h2>
<p>Hello, {user.name}!</p>
</div>
);
}
普段からtypescriptにてreact-router-domのuseOutletContextを使用されている方、もしより良いコードの書きぶりをご存知でしたり、何か修正点がありましたら、ご教示頂けないでしょうか？
0 likes