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

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

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

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

JavaScript

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

React.js

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

Q&A

解決済

1回答

596閲覧

react-router-reduxにてエラー

increment-P

総合スコア16

Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

JavaScript

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

React.js

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

0グッド

0クリップ

投稿2019/01/05 16:02

前提・実現したいこと

react-router-reduxを勉強しています。
compileは通るのですがブラウザではエラーがでています。
解決の糸口いら見つけられなく困っています。
ご指導いただけますでしょうか?

発生している問題・エラーメッセージ

TypeError: Cannot read property 'dispatch' of undefined
ConnectedRouter._this.handleLocationChange
node_modules/react-router-redux/es/ConnectedRouter.js:49

該当のソースコード

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
//import App from './App';
import * as serviceWorker from './serviceWorker';

import { createStore, combineReducers, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';

import createHistory from 'history/createBrowserHistory';
import { Route } from 'react-router';

import { ConnectedRouter, routerReducer, routerMiddleware } from 'react-router-redux';

import { App, Count, Display } from './components';
import { countReducer } from './reducers/count';

const history = createHistory();
const middleware = routerMiddleware(history);

const store = createStore(
combineReducers({
count: countReducer,
routing: routerReducer
}),
applyMiddleware(middleware)
);

ReactDOM.render(
<Provider store={store}>
<ConnectedRouter history={ history }>
<div>
<Route exact path="/" component={ App }/>
<Route path="/count" component={ Count }/>
<Route path="/display" component={ Display }/>
</div>
</ConnectedRouter>
</Provider>
, document.getElementById('root')
);
serviceWorker.unregister();

試したこと

ここに問題に対して試したことを記載してください。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

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

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

jun68ykt

2019/01/05 23:16

ご質問の状況をより正確に把握するためご使用のパッケージのバージョンを明確にしておいたほうがよいので、参考までに package.json もご質問にコピペで追記して頂けますでしょうか。
guest

回答1

0

自己解決

質問の内容が不十分でした。
問題はreact-router-reduxのバージョンの問題でした。
ありがとうございました。

別の問題が発生したため、一旦この質問は終了し、別途質問しようと思います。

投稿2019/01/21 00:45

increment-P

総合スコア16

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

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

ina

2019/03/27 08:52 編集

同じエラーで困っています。 バージョンの問題は解決されたのでしょうか? そうであれば、解決方法を詳しく教えていただけないでしょうか? よろしくお願いいたします。 react-router-reduxのバージョンは、^5.0.0-alpha.9 です。
ina

2019/03/28 05:50

こちら自力で何とかなりました。(お騒がせしました) 同じ現象で困っている人もいるかもしれないので、解決したやり方を書いておきます。 react-router-reduxを導入しようとした際にコンパイルは通るのですが、 ブラウザで「TypeError: Cannot read property 'dispatch' of undefined」というエラーが出ていて、 パッケージのバージョンを下記のように修正すると、 修正前 "react-redux": "^6.0.1" "react-router-dom": "^5.0.0" 修正後 "react-redux": "^5.0.4" "react-router-dom": "^4.2.2" エラーが「A <Router> may have only one child element」に変わり、 Routeを<React.Fragment>(もしくは<div>など)で囲むことでエラーはなくなりました。 参考にしたサイト https://kenjimorita.jp/react-router3-x%E2%86%924-x/
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問