質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.61%

  • React.js

    783questions

    Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

react-router-domにおいて、動的に404が起きたときにnot foundなページを指すRouteを表示したいが、URLは変更したくない

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 299

masaya_ohashi

score 8752

 前提・実現したいこと

例えばユーザの詳細ページUserDetail(URL:/user/:user_name)があったとします。このURLへアクセスしたとき、動的にjavascriptで該当ユーザの情報を取得します。この際の取得のリクエストにて404が起きたときに、404用のNotFoundPageにリダイレクトして固定の内容を表示します。

この処理の際に、react-router-domの<Redirect>やreact-router-reduxのpushreplaceを使うとURLが書き換わってしまいます。これを元の/user/:user_nameというURLのまま、Not foundのRouteの内容を表示させることは可能でしょうか。

 発生している問題・エラーメッセージ

URLを書き換えずにNotFoundなRouteを表示したいが、URLが書き換わってしまう。

  • /user/:user_nameにアクセスする
  • Routeに定義されているのでUserDetailのComponentが表示される
  • UserDetail内で動的にユーザ情報取得処理が実行される
  • 正常であればそのままUserDetailのComponentが書き換わり、ユーザの詳細が表示される
  • 404が発生した際、UserDetailの代わりにNotFoundPageのComponentの内容が表示されて欲しい

ようするに、URLを実際には書き換えずに、Switchの該当Routeが表示される方法がないかを知りたいです。

 該当のソースコード

<Switch>
  <Route exact path="/user/:user_name" component={UserDetail}/>
  <Route component={NotFoundPage}/>
</Switch>

 試したこと

react-router-domやreact-router-reduxのAPIをいろいろ調べてみた。

Switch内で一致したmatchを「やっぱうちは受け付けません!」と言える処理があればそのままNotFoundPageに流れてくれそうですが…

 補足情報(FW/ツールのバージョンなど)

react@16.2.0
react-dom@16.2.0
react-router@3.2.1
react-router-dom@4.2.2
react-router-redux@5.0.0-alpha.9

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

404が発生した際、UserDetailの代わりにNotFoundPageのComponentの内容が表示されて欲しい
&
URLを実際には書き換えずに、

ということであれば、404が発生した時に<Route component={NotFoundPage}/>に飛ばすということはせずに、単純にUserDetailコンポーネントの中でNotFoundPageを表示してあげれば良いだけではないでしょうか?

もしくは、デコレーターのようにUserDetailコンポーネントを別のコンポーネントでラップしてあげて、ラップする側のコンポーネントで該当ユーザの情報の取得を行い、取得できれば、UserDetailコンポーネントを返し、取得出来なればNotFoundPageコンポーネントを返してあげるようにするとか。

※ 後で時間があればコード書いて追記するかもしれません。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/04/18 17:27

    やっぱそうなっちゃいますかね…URLが不一致だったときと同じようにSwitchの下流に流せたらいいなと思っていたのですが…

    キャンセル

  • 2018/04/18 17:32

    そうですね、、、それに同じURLにリダイレクトしようとすると、`You tried to redirect to the same route you're currently on: "/users/1"`みたいなエラーになってしまいますよね。クエリーパラメターをリダイレクトパスにつけても同じエラーになりますね。

    キャンセル

  • 2018/04/18 17:35

    それか、一旦、react-routerでstateオブジェクト付きでredirectさせて、redirect先で元の遷移元ページのurlに戻すけどNotFoundコンポーネントを出すとか変なことをやれば出来なくはなさそうですが。。それなら、もとから404ならNotFoundコンポーネントをレンダーした方が良さそうですね。

    キャンセル

  • 2018/04/18 17:58

    Routeコンポーネントをラップするコンポーネントを作って、そちらで上手いことやるって方法も取れなくは無さそうですね。(どうやるかまでは考えてないですが)
    一応、Routeのソースコードへのリンクを貼っておきます。
    https://github.com/ReactTraining/react-router/blob/master/packages/react-router/modules/Route.js

    キャンセル

  • 2018/04/19 09:10

    なんかちょっと工夫したら行けそうですね!
    とりあえず今急ぎの作業なので検証の余裕がないので後日やってみます!今はとりあえず提案頂いたラップクラスで行こうと思います。ありがとうございました!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.61%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • React.js

    783questions

    Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

  • トップ
  • React.jsに関する質問
  • react-router-domにおいて、動的に404が起きたときにnot foundなページを指すRouteを表示したいが、URLは変更したくない