1

ConnectedRouterがルート変更の履歴を更新していない問題が発生しています。 ルートチェンジストアは更新履歴を取得し、ルーター(ConnectedRouterの子)は更新履歴を取得しますが、ConnectedRouterの履歴は変わりません。新しいコンポーネントはレンダリングされませんが、ブラウザのURLが変更されます。React Router Redux ConnectedRouterがルート変更で更新されない

インデックス

import React from 'react' 
import ReactDOM from 'react-dom' 
import { Provider } from 'react-redux' 
import { ConnectedRouter } from 'react-router-redux' 
import AppContainer from './containers/app' 
import { history, store } from './store' 

ReactDOM.render(
    <Provider store={store}> 
    <ConnectedRouter history={history}> 
     <AppContainer /> 
    </ConnectedRouter> 
    </Provider>, 
    document.getElementById('root') 
) 

ストア

import createHistory from 'history/createBrowserHistory' 
import { createStore, applyMiddleware, compose } from 'redux' 
import { routerMiddleware } from 'react-router-redux' 
import { rootReducer } from './reducers/root' 

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose 

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

export const store = createStore(
    rootReducer, 
    composeEnhancers(applyMiddleware(middleware)) 
) 

rootReducer

import { combineReducers } from 'redux' 
import { routerReducer } from 'react-router-redux' 

export const rootReducer = combineReducers({ 
    router: routerReducer, 
}) 

HeaderContainer

import { bindActionCreators } from 'redux' 
import { connect } from 'react-redux' 
import { withRouter } from 'react-router-dom' 
import { push } from "react-router-redux" 
import { HeaderTemplate } from '../components/templates/header' 

const mapStateToProps = state => ({}) 

const mapDispatchToProps = dispatch => 
    bindActionCreators({ 
    pushRoute: location => dispatch(push(location)), 
    }, dispatch) 

export default withRouter(
    connect(mapStateToProps, mapDispatchToProps)(HeaderTemplate) 
) 

ヘッダーテンプレート

import React from 'react' 

export const HeaderTemplate = props => (
    <div className="content"> 
    <nav> 
     <ul> 
     <SomeLink onClick={() => props.pushRoute('/')}>Link1</SomeLink> 
     <SomeLink onClick={() => props.pushRoute('/test')}>Link2</SomeLink> 
     </ul> 
    </nav> 
    </div> 
) 

答えて

0

質問は少し混乱しますが、私はあなたの問題を知っていると思います。私はルータがConnectedRouterの子になるとは思わない、あなたはConnectedRouterでルータを交換する必要があり、すべてが期待どおりに動作する。

4

それはあなたがwithRouterHeaderContainerをラップしている何をしているかのように見えますが、あなたは実際にそのAppContainerはそれの実際の<Route />の内側を持っていることを前提としてAppContainerをラップする必要があります。

私が言う唯一のことは、あなたが走ったことを確認することですそれ以外

npm install --save [email protected]

in order to user the ConnectedRouter

関連する問題