CODEWITHSUNDEEP
javascriptreact-routerreact-reduxreact-router-redux
withintheruins14
withintheruins14

Reputation: 427

React Router Redux - Duplicate Renders when using Link or Back Button

I am seeing duplicate renders when I click a Link or use the back button. I can go to any page and do a real browser refresh and everything will work properly. My logger shows @@router/LOCATION_CHANGE twice and this is causing lots of warning and exceptions around duplication instances of things. This does not appear to be an issue of hashHistory vs browserHistory. As people have pointed out on github issues. I am on "react-router-redux": "4.0.7". Setting adjustUrlOnReplay to false doesn't appear to do anything. As always, really appreciate any help! Below are my configureStore and Routes js files. Can anyone help me find the problem here? Thanks! Phillip

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'));
}

Upvotes: 4

Views: 896

Answers (1)

Kendrick johnson
Kendrick johnson

Reputation: 322

https://github.com/ReactTraining/history/issues/427 Updating to react-router v4 solve this.

Upvotes: 1

Related Questions