2017-02-13 3 views
3

Ich sehe doppelte Rendern, wenn ich auf einen Link klicke oder die Zurück-Taste verwenden. Ich kann auf jede Seite gehen und einen echten Browser aktualisieren und alles wird funktionieren. Mein Logger zeigt @@ router/LOCATION_CHANGE zweimal an und dies verursacht viele Warnungen und Ausnahmen im Zusammenhang mit doppelten Instanzen von Dingen. Dies scheint kein Problem von hashHistory vs. browserHistory zu sein. Wie Leute auf Github-Probleme hingewiesen haben. Ich bin auf "react-router-redux": "4.0.7". Die Einstellung von adjustUrlOnReplay auf false scheint nichts zu bewirken. Wie immer, schätze wirklich jede Hilfe! Im Folgenden finden Sie meine js-Dateien configureStore und Routes. Kann mir jemand helfen, das Problem hier zu finden? Vielen Dank! PhillipReact Router Redux - Duplicate Renders bei der Verwendung von Link oder Zurück Button

configureStore.js

import { createStore, applyMiddleware, combineReducers, compose } from 'redux' 
import thunk from 'redux-thunk' 
import logger from 'redux-logger' 
import rootReducer from '../reducers' 
import createSagaMiddleware from 'redux-saga' 
import rootSaga from '../sagas/sagas' 
import promiseMiddleware from 'redux-promise-middleware' 
import { syncHistoryWithStore} from 'react-router-redux' 
import { browserHistory } from 'react-router' 
import { apiMiddleware } from 'redux-api-middleware'; 

const sagaMiddleware = createSagaMiddleware() 

const initialState = { 
}; 

const enhancers = compose(
    window.devToolsExtension ? window.devToolsExtension() : f => f 
); 

const store = createStore(rootReducer, initialState, compose(
    applyMiddleware(apiMiddleware, thunk, logger(), sagaMiddleware), 
    typeof window === 'object' && typeof window.devToolsExtension !== 'undefined' ? window.devToolsExtension() : f => f 
)); 

export const history = syncHistoryWithStore(browserHistory, store); 
sagaMiddleware.run(rootSaga); 
export default store; 

routes.js

import App from './App' 
import '...a bunch of different components' 
import { Provider } from 'react-redux' 
import { Router, Route, IndexRoute, browserHistory } from 'react-router' 
import store, { history } from './store/configureStore.js' 

const router = (
    <Provider store={store}> 
    <Router history={history}> 
     <Route path="/" component={App}> 
     <IndexRoute component={TeamsContainer}/> 
     <Route path="teams" component={TeamsContainer} /> 
     <Route path="teams/:teamId" component={TeamContainer} /> 
     <Route path="teams/:teamId/add_member" component={AddMemberContainer} /> 
     <Route path="teams/:teamId/team_members/:teamMemberId" component={TeamMemberContainer} /> 
     </Route> 
    </Router> 
    </Provider> 
) 

if ($('#app').length) { 
    ReactDOM.render(router, document.getElementById('app')); 
} 

Antwort

Verwandte Themen