React-RouterでURLの直打ちに対応したい

Question

react-routerで、/path/AにURL直打ちでアクセスした時に404になってしまう対処法として、調べるとNginxの設定を

try_files $uri /;

とする方法が記載されていたので、実際に試してみると、404にはならなくなりました。

しかし、/path/Aでリロードした時、もしくはURLを直打ちした時に、/にリダイレクト(という表現は正しくないですが)されてしまいます。

どのリンクをクリックしてもLPに飛ばされるというのは、UXとしても、SEOとしても良くないと思うので、改善したいです。

TwitterはSPAですが、URL直打ちしてもきちんと各ツイート等にリンクされますが、どのように設計すればそのようにできますか？

Answer 1

とりあえず nginx の設定は消してください。
/path/A は react-router でルーティングを定義していますか。
定義があって 404 になるのであれば正しくルーティングされてないので定義を見直してください。
ルーティングしていないパスへの遷移をハンドリングしたいのであれば、

<Router>
  <Route path="/" exact component={Home}/>
  <Route path="/path/A" component={A}/>
  ...
  <Route component={NotFound} />
</Router>

このようにしてください。

Routes without a path always match.
React Router: Declarative Routing for React.js

Comments

[makkuro]

回答ありがとうございます。
うまく説明できないので、似た問題のTeratailの質問を載せます。
https://teratail.com/questions/26245

ルーティングは適切に設定されていて、"/"にいる状態から、
<Link to="/path/A" />
をクリックした時には"/path/A"が表示されます。
これは読み込まれているファイルが"https://example.com/index.html"だからです。

しかし、リロードすると"https://example.com/path/A"を取得しようとするので、Nginxで"/index.html"にリダイレクトさせないと404になってしまいます。これは"/path/A"という実体としてのファイルがwebサーバに存在しないからです。

webpack dev serverの"--historyApiFallback true"というオプションを使うと、dev serverではリロードしても"/path/A"のページを表示するローカル環境が作れることは確認済みです。しかし、同様の挙動をNginxの本番環境で構築する方法がわかりません。