react-routerでURLパラメータを指定した際、URL直打ちだと404になります

react-routerを利用し、http://.../detail/:idにアクセスすると、
指定したIDが画面に表示される処理を作成しています。
IDを指定して詳細画面を表示するイメージです。

EX:
http://.../detail/1 <- ID::1の詳細情報を表示
http://.../detail/36 <- ID::36の詳細情報を表示

ボタン押下時に指定したID情報をDetailコンポーネントに渡し、
画面に表示するところまでは動作しているのですが、
URL直打ち、あるいはブラウザのリロードを行うと、404エラーになってしまいます。
原因や改善方法がお分かりの方がいらっしゃれば、ご教授をお願いいたします。

完全なソースは下記となります。

javascript
1import React, { Component } from 'react';
2import ReactDOM from 'react-dom';
3import { IndexRoute, Link, Router, Route, browserHistory, hashHistory } from 'react-router';
4
5class Container extends Component {
6  render() {
7    return (
8      <section id="container">
9        <SideMenu />
10        <Main component={this.props.children}/>
11      </section>
12    )
13  }
14}
15
16class SideMenu extends Component {
17  style() {
18    return ({
19      listStyle: 'none'
20    })
21  }
22  render() {
23    return (
24      <section id="side-menu">
25        <ul className="main-nav" style={this.style()}>
26          <li><Link to="/">index</Link></li>
27          <li><Link to="/A">A</Link></li>
28          <li><Link to="/B">B</Link></li>
29          <li><Link to="/ADD/1">ADD</Link></li>
30        </ul>
31      </section>
32    );
33  }
34}
35
36class Main extends Component {
37  render() {
38    return (
39      <section id="main">
40        { this.props.component }
41      </section>
42    );
43  }
44}
45
46class PageA extends Component {
47  render() {
48    return (<div>A</div>);
49  }
50}
51
52class PageB extends Component {
53  render() {
54    return (<div>B</div>);
55  }
56}
57
58class ADD extends Component {
59  render() {
60    return (
61      <div>
62        <div>ADD</div>
63        <div>{ this.props.params.id }</div>
64      </div>
65    );
66  }
67}
68
69ReactDOM.render((
70  <Router history={browserHistory}>
71    <Route path="/" component={Container}>
72      <Route path="/A" component={PageA} />
73      <Route path="/B" component={PageB} />
74      <Route path="/ADD/:id" component={ADD} />
75    </Route>
76  </Router>
77), document.querySelector('#wrapper'));

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

回答5件

解決済みとのことですが同種の調査をしていたのでコメントします。

URL http://hoge.com/detail/1 をブラウザリロード、またはダイレクトにアクセスした場合に 404 になってしまうのは、react-router の問題ではなくてWebサーバー側の設定によるものではないでしょうか。

自己解決したのでQiitaに投稿しました。
http://qiita.com/HIGAX/items/e7696fec353203453c0b

とのことですが、投稿の内容では 404 問題は解消しないような気がします。

トップページから react-router でページを辿る場合以下の遷移になりますが、

http://hoge.com/
http://hoge.com/index.html => 実際ブラウザが読み込んでいるのはこのファイル
http://hoge.com/detail/1 => react-router が対応するコンポーネントを読み込んで表示。このとき History API により URL が書き換わっている

ブラウザリロード、またはダイレクトにアクセスした場合、以下のようになります。

http://hoge.com/detail/1 => このリソースは存在しないので 404 になる

したがって、リソースが存在しない場合 /index.html に rewrite してあげないといけないはずです。rewrite の設定ができている場合、ダイレクトにアクセスした場合の挙動は以下のようになります。

http://hoge.com/detail/1
http://hoge.com/index.html => URLが rewrite された結果ブラウザが読み込んでいるのはこのファイルになる
http://hoge.com/detail/1 => react-router が対応するコンポーネントを読み込んで表示

簡単な確認方法としては、 index.html の <head> 内に

html
1<base href="/">

を加えたうえで、以下の Python スクリプトで HTTP Server を立ち上げてアクセスします。

https://gist.github.com/jtangelder/e445e9a7f5e31c220be6

投稿2016/03/17 22:17

編集2016/03/17 22:22

iktakahiro

総合スコア142

自己解決

自己解決したのでQiitaに投稿しました。
http://qiita.com/HIGAX/items/e7696fec353203453c0b

投稿2016/02/04 09:27

XEGASY

総合スコア18

browserhistoryで、リロードや、更新を許容するために
nginxで、設定を追加すればできました。

        location / {
            root /var/webapps/test/build/;
            index index.html;
            # ↓これで、index.htmlを表示してくれる
            try_files $uri $uri/ /index.html;
        }

投稿2017/01/16 09:43

ShinyaMurakami

総合スコア13

自分も同じくbrowserHistoryで直接アクセスする方法を模索中です。ちなみにhashHistoryを使うと直接アクセスできますよ（製品版への使用は推奨されていないようですが）。

<Router history={hashHistory}>

</Router>

アクセスする際は、#を挟んで以下のようにURLを指定
http://.../#/ADD/1

投稿2016/02/03 07:13

maechabin

総合スコア41

XEGASY

2016/02/03 08:48 編集

回答ありがとうございます。ハッシュを使わずにURLを固定する方法はないものでしょうかね…。ハッシュで固定できたとしても、理解できないURLでは意味が無いと思うのです。有用なサンプルがないか探してみます…。

ShinyaMurakami

2017/01/16 09:42 編集

コメントになってたので削除

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

申し訳ありません。
文章中Detailコンポーネントとなっている箇所が、
ソースではADDコンポーネントとなっています。

投稿2016/02/02 08:54

XEGASY

総合スコア18

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.36%

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

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

質問する

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

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

react-routerでURLパラメータを指定した際、URL直打ちだと404になります

関連した質問