React router rerenders whole app and resets redux state tree?

Question

I've have tried to setup React, redux, react-redux, react-router and react-redux-router, but everytime I do a transition from a route to another, the whole app gets re-rendered, How can I fix this? I mean, what I need to do is at least the top level component to stay where he is and don't lose the redux state tree, because a router transition resets redux state.

These are the version of the packages I'm using:

"react": "^0.14.6",
"react-dom": "^0.14.6",
"react-redux": "^4.0.6",
"react-router": "^2.0.0-rc5",
"react-router-redux": "^3.0.0",
"redux": "^3.0.6"

This is my route configuration:

export default (<Route path="/" component={App}>
    <Route path="companies">
        <Route path="create" components={CompaniesCreate}></Route>
        <Route path="grid" components={CompaniesGrid}></Route>
    </Route>
 </Route>);

My default index.js export:

ReactDOM.render(
<Provider store={store}>
    <div>
        <Router history={browserHistory} routes={Routes}/>
        <DevTools />
    </div>
</Provider>
, document.querySelector('.container'));

my ConfigureStore.js

const reduxRouterMiddleware = syncHistory(browserHistory);
const finalCreateStore = compose(
    applyMiddleware(ReduxPromise, reduxRouterMiddleware),
    DevTools.instrument()
)(createStore);

export default function configureStore(initialState) {
    const store = finalCreateStore(rootReducer, initialState);
    if (module.hot) {
        module.hot.accept('../reducers', () =>
            store.replaceReducer(require('../reducers'))
        );
    }
    return store;
 }

And finally, the index for the reducers:

export default combineReducers({
    ...reducers
    routing: routeReducer,
});

I'm using material UI Components, here is how I use the link: <ListItem key={1} primaryText="Crear" linkButton={true} href="/companies/create" leftIcon={<CreateIcon />} /> @janpieter_z — Cristian Barrientos Montoya

janpieter_z janpieter_z · Accepted Answer · 2016-02-18T14:09:43

Since the ListItem renders an EnhancedButton, which has a parameter called containerElement, you can call this with the ReactRouter Link component. In their docs for Link they specify how to use it, an example for it is below, you'll have to get react-router's Link component and use that for navigation around your application.

import {Link} from 'react-router';

render() {
//removed props and other items for simplicity
    return(    
        <ListItem 
             containerElement=Link 
             key={1} 
             primaryText="Crear" 
             linkButton={true} 
             href="/companies/create" 
             leftIcon={<CreateIcon />} 
         />
     );
}

React router rerenders whole app and resets redux state tree?

1 Answers