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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

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

Q&A

1回答

4083閲覧

React+reduxでroutingの際にSecurityError: Failed to execute 'pushState' on 'History'が出る

tal

総合スコア20

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

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

0グッド

0クリップ

投稿2016/07/03 05:24

React.js+reduxでアプリケーションを作成しております。

初期に読み込まれるindex.js

JavaScript

1import React from 'react'; 2import { render } from 'react-dom'; 3import { Provider } from 'react-redux'; 4import { Router, Route, browserHistory, Link, IndexRoute } from 'react-router'; 5import { syncHistoryWithStore } from 'react-router-redux'; 6 7import 'babel-polyfill'; 8 9import IndexContainer from './containers/IndexContainer'; 10import TopContainer from './containers/TopContainer'; 11import HelpContainer from './containers/HelpContainer'; 12 13import configureStore from './stores/configureStore'; 14 15const store = configureStore(); 16const history = syncHistoryWithStore(browserHistory, store); 17 18render( 19 <Provider store={store}> 20 <Router history={history}> 21 <Route path="/" component={IndexContainer}> 22 <IndexRoute component={TopContainer} /> 23 <Route path="/help" component={HelpContainer} /> 24 </Route> 25 </Router> 26 </Provider>, 27 document.getElementById('root') 28); 29

/containers/HelpContainer.js

JavaScript

1import React, { Component, PropTypes } from 'react'; 2import { Link } from 'react-router'; 3import { connect } from 'react-redux'; 4import { bindActionCreators } from 'redux'; 5 6import { increment } from '../actions/app'; 7import Router from 'react-router'; 8 9import Help from '../components/help'; 10import Header from '../components/header'; 11import Footer from '../components/footer'; 12 13 14export default class HelpContainer extends Component{ 15 render(){ 16 return ( 17 <div> 18 <Header /> 19 <Help /> 20 <Footer /> 21 </div> 22 ); 23 } 24}; 25 26const mapStateToProps = (state, ownProps) => { 27 return state; 28}; 29 30const mapDispatchToProps = (dispatch) => { 31 return bindActionCreators({ 32 increment, 33 }, dispatch); 34}; 35 36export default connect( 37 mapStateToProps, 38 mapDispatchToProps 39)(HelpContainer); 40

/components/help.js

JavaScript

1import React, { Component, propTypes } from 'react'; 2import Header from './header'; 3import Footer from './footer'; 4import { Link, pushState } from 'redux-router'; 5import { bindActionCreators } from 'redux'; 6import { connect } from 'react-redux'; 7 8export default class Help extends Component{ 9 render(){ 10 return ( 11 <div> 12 <Header /> 13 <h2>ヘルプページ</h2> 14 <Footer /> 15 </div> 16 ); 17 } 18} 19 20Help.propTypes = { 21}; 22 23function mapStateToProps(state) { 24 return { 25 }; 26} 27 28function mapDispatchToProps(dispatch) { 29 return { 30 }; 31} 32 33export default connect( 34 mapStateToProps, 35 mapDispatchToProps 36)(Help);

という構成にしています。
トップページのcomponentsファイルに下記のようなリンクを記述して、遷移しようとするとその下のエラーが発生します。

HTML

1<Link to='/help'>help</Link>

bundle.js:35423 Uncaught SecurityError: Failed to execute 'pushState' on 'History': A history state object with URL 'http://example.com/help' cannot be created in a document with origin 'http://localhost:8080' and URL 'http://localhost:8080/'.

pushstateの記述方法や位置が間違っているのかわからず、修正方法をご教授いただければ幸いです。宜しくお願いいたします。

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

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

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

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

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

guest

回答1

0

render( <Provider store={store}> <Router history={history}> <Route path="/" component={IndexContainer}> <IndexRoute component={TopContainer} /> <Route path="/help" component={HelpContainer} /> </Route> </Router> </Provider>, document.getElementById('root') );

だと,helpへのアクセスが //help になっている気がしますね

<Route path="help" component={HelpContainer} />

ではないでしょうか.

投稿2016/07/06 05:04

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問