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

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

新規登録して質問してみよう
ただいま回答率
85.50%
React.js

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

Q&A

解決済

1回答

7571閲覧

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

masaya_ohashi

総合スコア9206

React.js

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

0グッド

0クリップ

投稿2018/04/18 07:46

前提・実現したいこと

例えばユーザの詳細ページ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が表示される方法がないかを知りたいです。

該当のソースコード

javascript

1<Switch> 2 <Route exact path="/user/:user_name" component={UserDetail}/> 3 <Route component={NotFoundPage}/> 4</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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

404が発生した際、UserDetailの代わりにNotFoundPageのComponentの内容が表示されて欲しい

&

URLを実際には書き換えずに、

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

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

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

投稿2018/04/18 08:20

HayatoKamono

総合スコア2415

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

masaya_ohashi

2018/04/18 08:27

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

2018/04/18 08:32

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

2018/04/18 08:35

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

2018/04/19 00:10

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問