Question

我已经尝试设置React，redux，react-redux，react-router和react-redux-router，但每次我从路由转换到另一个路由时，整个应用都会被重新渲染，我怎样才能解决这个问题？我的意思是，我需要做的是至少保持最低级别的组件并且不要丢失redux状态树，因为路由器转换会重置redux状态。

这些是我使用的软件包的版本：

＆＃34;反应＆＃34;：＆＃34; ^ 0.14.6＆＃34;，
  ＆＃34; react-dom＆＃34;：＆＃34; ^ 0.14.6＆＃34;，
  ＆＃34; react-redux＆＃34;：＆＃34; ^ 4.0.6＆＃34;，
  ＆＃34; react-router＆＃34;：＆＃34; ^ 2.0.0-rc5＆＃34;，
  ＆＃34; react-router-redux＆＃34;：＆＃34; ^ 3.0.0＆＃34;，
  ＆＃34; redux＆＃34;：＆＃34; ^ 3.0.6＆＃34;

这是我的路线配置：

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

我的默认index.js导出：

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

我的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;
 }

最后，减速器的索引：

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

Answer 1

由于ListItem呈现EnhancedButton，其中有一个名为containerElement的参数，您可以使用ReactRouter Link组件调用它。在their docs for Link中，他们指定了如何使用它，下面是一个示例，您必须获取react-router的Link组件并将其用于应用程序周围的导航。

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路由器重新呈现整个应用程序并重置redux状态树？

1 个答案: