React 路由器重新渲染整个应用程序并重置 redux 状态树?
React router rerenders whole app and resets redux state tree?
我已经尝试设置 React、redux、react-redux、react-router 和 react-redux-router,但每次我从一条路线过渡到另一条路线时,整个应用程序都会重新呈现,我怎样才能解决这个问题?我的意思是,我需要做的是至少让顶级组件保持原样并且不要丢失 redux 状态树,因为路由器转换会重置 redux 状态。
这些是我正在使用的软件包版本:
"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"
这是我的路由配置:
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,
});
由于 ListItem
renders an EnhancedButton
, which has a parameter called containerElement, you can call this with the ReactRouter Link
component. In 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、react-redux、react-router 和 react-redux-router,但每次我从一条路线过渡到另一条路线时,整个应用程序都会重新呈现,我怎样才能解决这个问题?我的意思是,我需要做的是至少让顶级组件保持原样并且不要丢失 redux 状态树,因为路由器转换会重置 redux 状态。
这些是我正在使用的软件包版本:
"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"
这是我的路由配置:
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,
});
由于 ListItem
renders an EnhancedButton
, which has a parameter called containerElement, you can call this with the ReactRouter Link
component. In 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 />}
/>
);
}