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

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

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

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

Q&A

解決済

5回答

34327閲覧

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

XEGASY

総合スコア18

React.js

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

1グッド

4クリップ

投稿2016/02/02 08:50

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'));
maechabin👍を押しています

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

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

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

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

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

guest

回答5

0

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

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> 内に

html

1<base href="/">

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

投稿2016/03/17 22:17

編集2016/03/17 22:22
iktakahiro

総合スコア142

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

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

0

自己解決

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

投稿2016/02/04 09:27

XEGASY

総合スコア18

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

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

0

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

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

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

0

自分も同じく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 編集

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

0

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

投稿2016/02/02 08:54

XEGASY

総合スコア18

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問