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

前提・実現したいこと

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

この処理の際に、react-router-domの<Redirect>やreact-router-reduxのpush、replaceを使うと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

行動規範の内容に同意します

回答1件

ベストアンサー

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コンポーネントをレンダーした方が良さそうですね。

HayatoKamono

2018/04/18 08:58

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

masaya_ohashi

2018/04/19 00:10

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

行動規範の内容に同意します