React Router は、React の世界ではルーティングの標準となってから長い年月が経ちました。しかし、バージョン 7.9 多くの人が長年待ち望んでいたものをもたらしました。 Middleware APIこれで、アクセスチェック、データのプリロード、その他の「レイヤー」を、余分なコストなしでルートに直接組み込むことができます。
React Routerのミドルウェアとは何ですか？
以前は useEffect やコンテキストを構築したり、ルートをHOCでラップしたりする必要がありましたが、現在はすべてがエレガントに解決されます。
アクセスチェック（ユーザーの役割など）
リダイレクト（認証されていない場合はログインページにリダイレクトされます）
ページのレンダリング前のデータの読み込み
ログとメトリクス
ミドルウェアは実行される機能です コンポーネントのレンダリング前、移動を許可するか変更することができます。
例：認証の確認
import { createBrowserRouter, RouterProvider } from "react-router";
import App from "./App";
import Dashboard from "./pages/Dashboard";
import Login from "./pages/Login";
const requireAuth = async ({ context, next }) => {
if (!context.user) {
return Response.redirect("/login");
}
return next();
};
const router = createBrowserRouter([
{
path: "/",
element: <App />,
children: [
{
path: "dashboard",
element: <Dashboard />,
middleware: [requireAuth]
},
{
path: "login",
element: <Login />
}
]
}
]);
export default function Root() {
return <RouterProvider router={router} />;
}
ルート保護はルーター自体に組み込まれているため、自転車を囲む必要はありません。
レンダリング前のデータのプリロード
const preloadUser = async ({ next }) => {
const user = await fetch("/api/me").then(r => r.json());
return next({ context: { user } });
};
const router = createBrowserRouter([
{
path: "/profile",
element: <Profile />,
middleware: [preloadUser]
}
]);
これで、コンポーネント Profile のデータは、「読み込み中...」の点滅なしですぐに利用できるようになります。
従来のアプローチとの比較
1. HOC (Higher-Order Components)
function withAuth(Component) {
return function Wrapped(props) {
const user = useUser();
if (!user) return <Navigate to="/login" />;
return <Component {...props} />;
}
}
❌ 短所：コードの重複、データフローの管理が難しい、コンポーネントのネストが増える。
2. useEffect + Navigate
function Dashboard() {
const user = useUser();
const navigate = useNavigate();
useEffect(() => {
if (!user) navigate("/login");
}, [user]);
return <div>Dashboard</div>;
}
❌ 短所：最初にコンポーネントがマウントされ、次にリダイレクトが行われます。ユーザーには「点滅」が表示されます。
3. ミドルウェアAPI（新しいアプローチ）
✅ すべてがルートに含まれており、「点滅」なしで、読み取り可能で一元化されたコード。
なぜ素晴らしいのでしょうか？
よりクリーンなコード — ルートはアクセスと読み込みのロジックの単一ポイントになります。
より速いUX — レンダリング前のデータのプリロード。
柔軟性 — あらゆるニーズ（ロギング、分析、フィーチャーフラグ）に合わせて独自のミドルウェアを書くことができます。
しかし！ ミドルウェアは非同期で動作するため、チェックが多い場合はパフォーマンスを考慮し、結果をキャッシュすることをお勧めします。
React Router 7.9は、期待通りの結果をもたらしました。ルーティングを アクセスとデータの中央管理場所。ミドルウェアAPIは、より予測可能で正確なアプリケーションへの道を開きます。
B コディケ 私たちはプログラミングの学習をシンプルでわかりやすくします。Go、JavaScript、Python、その他のテクノロジーのコースをすべて1つのアプリケーションで提供します。
そして、私たちは居心地の良い テレグラムチャンネル開発の世界からの最新ニュースを話し合い、洞察を共有し、新機能を一緒に分析します。 参加する、志を同じくする人々と一緒にITを学び、成長するために！