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

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

ただいまの
回答率

90.50%

  • React.js

    1115questions

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

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

解決済

回答 5

投稿

  • 評価
  • クリップ 3
  • VIEW 9,112

XEGASY

score 12

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

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

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

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

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { IndexRoute, Link, Router, Route, browserHistory, hashHistory } from 'react-router';

class Container extends Component {
  render() {
    return (
      <section id="container">
        <SideMenu />
        <Main component={this.props.children}/>
      </section>
    )
  }
}

class SideMenu extends Component {
  style() {
    return ({
      listStyle: 'none'
    })
  }
  render() {
    return (
      <section id="side-menu">
        <ul className="main-nav" style={this.style()}>
          <li><Link to="/">index</Link></li>
          <li><Link to="/A">A</Link></li>
          <li><Link to="/B">B</Link></li>
          <li><Link to="/ADD/1">ADD</Link></li>
        </ul>
      </section>
    );
  }
}

class Main extends Component {
  render() {
    return (
      <section id="main">
        { this.props.component }
      </section>
    );
  }
}

class PageA extends Component {
  render() {
    return (<div>A</div>);
  }
}

class PageB extends Component {
  render() {
    return (<div>B</div>);
  }
}

class ADD extends Component {
  render() {
    return (
      <div>
        <div>ADD</div>
        <div>{ this.props.params.id }</div>
      </div>
    );
  }
}

ReactDOM.render((
  <Router history={browserHistory}>
    <Route path="/" component={Container}>
      <Route path="/A" component={PageA} />
      <Route path="/B" component={PageB} />
      <Route path="/ADD/:id" component={ADD} />
    </Route>
  </Router>
), document.querySelector('#wrapper'));
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 5

+5

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

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

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

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

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

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

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

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

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

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

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

<base href="/">

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

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

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

check解決した方法

+1

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

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

0

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

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

0

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

<Router history={hashHistory}>

</Router>

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

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/02/03 17:44 編集

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

    キャンセル

  • 2016/12/21 12:05 編集

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

    キャンセル

0

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

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

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

  • React.js

    1115questions

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