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

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

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

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

Q&A

2回答

2291閲覧

connected-react-routerを使ってurlを変えたのに表示されるコンポーネントが変わらない

aiai8976

総合スコア112

React.js

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

1グッド

1クリップ

投稿2019/10/22 08:46

編集2022/01/12 10:55

前提・実現したいこと

以下のサイトと全く同じ状況が起きているのですが、自分の場合はもともとswitchを使っていました。
https://teratail.com/questions/216393
他の原因はどこにあるでしょうか。
わかる方がいましたら回答お願いします。

コンソール出力

action @@router/CALL_HISTORY_METHOD @ 23:59:06.455 redux-logger.js:388 prev state {noop: {…}, shopping: {…}, Ranking: {…}, router: {…}}Ranking: {category: undefined, ranking: undefined, error: false}noop: {}router: {location: {…}, action: "POP"}shopping: {categories: Array(3)}__proto__: Object redux-logger.js:392 action {type: "@@router/CALL_HISTORY_METHOD", payload: {…}}payload: {method: "push", args: Array(1)}args: ["/category/2502"]method: "push"__proto__: Objecttype: "@@router/CALL_HISTORY_METHOD"__proto__: Object redux-logger.js:401 next state {noop: {…}, shopping: {…}, Ranking: {…}, router: {…}}Ranking: {category: undefined, ranking: undefined, error: false}noop: {}router: {location: {…}, action: "POP"}shopping: {categories: Array(3)}__proto__: Object redux-logger.js:377 action @@router/LOCATION_CHANGE @ 23:59:06.457 redux-logger.js:388 prev state {noop: {…}, shopping: {…}, Ranking: {…}, router: {…}} redux-logger.js:392 action {type: "@@router/LOCATION_CHANGE", payload: {…}}payload: {location: {…}, action: "PUSH", isFirstRendering: false}type: "@@router/LOCATION_CHANGE"__proto__: Object redux-logger.js:401 next state {noop: {…}, shopping: {…}, Ranking: {…}, router: {…}}

該当のソースコード

createStore.js

import { createStore as reduxCreateStore, combineReducers, applyMiddleware } from 'redux'; import logger from 'redux-logger'; import thunk from 'redux-thunk'; import { connectRouter, routerMiddleware } from 'connected-react-router'; import * as reducers from './reducers'; export default function createStore(history) { return reduxCreateStore( combineReducers({ ...reducers, router: connectRouter(history), //ルーター状態を管理するルーターreducer }), applyMiddleware( logger, thunk, routerMiddleware(history) ) ); }

index.js

index.js

1import React from 'react'; 2import ReactDOM from 'react-dom'; 3import { Provider } from 'react-redux'; 4import { ConnectedRouter } from 'connected-react-router'; 5import createBrowserHistory from 'history/createBrowserHistory'; 6import App from './App'; 7import createStore from './createStore'; 8 9const history = createBrowserHistory(); 10 11//Storeの生成 12const store = createStore(history); 13 14ReactDOM.render( 15 <Provider store={store}> 16 <ConnectedRouter history={history}> 17 <App /> 18 </ConnectedRouter> 19 </Provider>, 20 document.getElementById('root') 21);

App.js

import React, { Component } from 'react'; import { Switch, Route, Redirect } from 'react-router-dom'; import Ranking from './containers/Ranking'; import Nav from './containers/Nav'; import Reboot from 'material-ui/Reboot'; import AppBar from 'material-ui/AppBar'; import Toolbar from 'material-ui/Toolbar'; import Typography from 'material-ui/Typography'; class App extends Component { render() { return ( <div className="App" style={{ paddingLeft: 240 }}> <Reboot /> <AppBar style={{ left: 240 }}> <Toolbar> <Typography type="title" color="inherit"> Yahoo!ショッピングランキング </Typography> </Toolbar> </AppBar> <Nav /> <div style={{ marginTop: 64, padding: 32 }}> <Switch> <Route path="/all" component={Ranking} /> <Route path="/category/1" render={() => <Redirect to="/all" />} /> <Route path="/category/:id" render={ ({ match }) => <Ranking categoryId={match.params.id} /> } /> </Switch> </div> </div> ); } } export default App;

components/Nav.js

import Drawer from 'material-ui/Drawer'; import List, { ListItem, ListItemText } from 'material-ui/List'; import PropTypes from 'prop-types'; import React from 'react'; export default function Nav({ categories, onClick }) { const to = category => ( category.id === '1' ? `/all` : `/category/${category.id}` ); return ( <Drawer type="permanent"> <List style={{ width: 240 }}> {categories.map(category => ( <ListItem button key={`menu-item-${category.id}`} onClick={() => onClick(to(category))} > <ListItemText primary={category.name} /> </ListItem> ))} </List> </Drawer> ); } Nav.propTypes = { categories: PropTypes.arrayOf( PropTypes.shape({ id: PropTypes.string.isRequired, name: PropTypes.string.isRequired }) ).isRequired, onClick: PropTypes.func.isRequired };

containers/Nav.js

import { connect } from 'react-redux'; import { push } from 'connected-react-router'; import Nav from '../components/Nav'; const mapStateToProps = state => ({ categories: state.shopping.categories }); const mapDispatchToProps = dispatch => ({ onClick(path) { dispatch(push(path)); } }) export default connect(mapStateToProps, mapDispatchToProps)(Nav);

reducers/Ranking.js

const getRanking = response => { const ranking = []; const itemLength = response.ResultSet.totalResultsReturned for (let index = 0; index < itemLength; index++) { const item = response.ResultSet['0'].Result[index + '']; ranking.push({ code: item.Code, name: item.Name, url: item.Url, imageUrl: item.Image.Medium }) } return ranking; } const initialState = { category: undefined, ranking: undefined, error: false }; export default (state = initialState, action) => { switch (action.type) { case 'START_REQUEST': return { category: action.payload.category, ranking: undefined, error: false }; case 'RECEIVE_DATA': return action.payload.error ? { ...state, error: true } : { ...state, ranking: getRanking(action.payload.response) }; default: return state; } }

###試したこと
https://github.com/supasate/connected-react-router/issues/260
上記のサイトにバージョンを6.0.0にダウングレードさせるように記述されていましたが、試してみても変わりませんでした。
react-router-domとconnected-react-routerが依存関係があるようで、上の記事に書かれている場合すべての通りを試してみましたが、変化なしです。

退会済みユーザー👍を押しています

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

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

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

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

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

guest

回答2

0

上記の回答は無視してください。
2点ほど確認していただきたいです。
storeの設定は、

// configureStore.js ... import { createBrowserHistory } from 'history' import { applyMiddleware, compose, createStore } from 'redux' import { routerMiddleware } from 'connected-react-router' import createRootReducer from './reducers' ... export const history = createBrowserHistory() export default function configureStore(preloadedState) { const store = createStore( createRootReducer(history), // root reducer with router state preloadedState, compose( applyMiddleware( routerMiddleware(history), // for dispatching history actions // ... other middlewares ... ), ), ) return store }

のようになっていますでしょうか?
また、App.jsでconsole.log(this.props)をしていただきたいです。
ReactはClassのpropsまたはstateが変わった時に再レンダリングします。なので、リンクが変わった際にpropsが変わっているのか確認していただきたいです。

投稿2019/11/04 08:38

YukiSaegusa

総合スコア35

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

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

aiai8976

2019/11/04 15:03

コメントありがとうございます。 それぞれの対応は上に加えました。 確認お願いします。
guest

0

Nav.jsの

onClick={() => onClick(to(category))}

を、

onClick={() => to(category)}

に変えて見てください。

投稿2019/11/04 08:25

YukiSaegusa

総合スコア35

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問