react-router

はじめてのReact #26 「ルーティングに対応する」設定をJSONにまとめる編 react-router@v5

これまでルーティング関連の記事では以下のような内容を取り上げてきました。

  • 第23回 基本的なReactRouterの使い方
  • 第24回 URLの一部をパラメーターとして受け取る
  • 第25回 認証とリダイレクト

今までは以下のように直接<Route>を書いてルーティングの定義を行ってきましたが、今回はこれらの設定をJSONなどで定義し、いつでも外部のファイルに出せるようにします。

<!-- befor -->
<Switch>
  <Route exact path="/" component={Home} />
  <Route exact path="/auth" component={Auth} />
  <Route path="/area/:cd" component={Meisan} />
</Switch>

このままでも動くんですけどね。ロジックと設定は分離して置いた方がメンテしやすくなりますからね。

続きを読む

はじめてのReact #25 「ルーティングに対応する」認証とリダイレクト編 react-router@v5

前々回では基本的なReactRouterの使い方を、前回でURLの一部をパラメーターとして受け取ってみました。

今回はユーザーの状態に合わせてページの出し分けを行います。
具体的には

  • 認証済みのユーザーにだけページを表示
  • 未認証のユーザーにはログインページを表示

という仕様になります。
続きを読む

はじめてのReact #24 「ルーティングに対応する」URLパラメーター編 react-router@v5

前回はReact Routerの基本的な機能を利用し簡単な図鑑アプリを作成しました。

今回はリクエストを受けたURLの一部をパラメーターとして受け取ってみます。
例えばブログやTwitterのようなアプリで特定のIDの記事を表示したい場合/posts/view/123といった形式のURLにアクセスするとします。ここで問題になるのは1000個の記事があった場合、1000個の<Route>を定義する必要が出てくるのかという点ですね。こういった場合に特定のパターンのURLは一部の文字列をパラメーターとして設定することができます。

続きを読む

はじめてのReact #23 「ルーティングに対応する」基本編 react-router@v5

React Routerは雑に言うとリクエストされたURLのパスと、ReactのComponentを紐付けてくれる便利なモジュールです。

例えば /foo にアクセスされたら FooComponentを、/barにアクセスされたらBarComponentを実行することができるようになります。

今回は3月21日に登場したばかりのReact Router v5を触ってみます。本来はv4.4として出す予定だったそうですがReact 16との互換性が大きく改善されたとのことでメジャーバージョンアップの運びとなったとのこと。使い方もv4系とあまり変わらないようですね。

続きを読む