Javascript 反应路由器不'；t同步历史记录和Redux存储

我试图让react路由器和redux一起工作。 当我的组件挂载时，我进行一个ajax调用，直到这个调用完成，我想显示一条加载消息。一旦ajax调用成功返回，我将重新路由到正确的页面。 然而，每当我以编程方式更改路由时，react router不会更新显示的页面。另外，我不想使用浏览器的历史记录，而是使用内部历史记录（内存历史记录），并且找不到任何与redux一起使用的示例

import React, {Component, PropTypes} from 'react';
import { render } from 'react-dom'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import { Router, Route, IndexRoute, createMemoryHistory, useRouterHistory, routerReducer } from 'react-router'
import { syncHistoryWithStore } from 'react-router-redux'

let appHistory;

export default class Transfer extends React.Component {
    componentWillMount(){
        myAjaxCall(function(){
            // Reroute
            appHistory.push('/projectrepresentation'); // changes a route change in the router, but doesn't display /projectrepresentation
        })
    }

    constructor(){
        const reducers = combineReducers({
          routing: routerReducer
        })

        store = createStore(reducers);

        // Create an enhanced internal (!) history that syncs navigation events with the store
        let createAppHistory = useRouterHistory(createMemoryHistory);
        appHistory = createMemoryHistory();
        history = syncHistoryWithStore(appHistory, store);
    }

    render () {

        return <Provider store={store}>
                <Router history={history}>
                    <Route path="/" component={() => <div>Loading</div>}>
                        <Route path="projectrepresentation" component={() => <div>Project Representation</div>}/>
                        <Route path="export" component={() => <div>Export</div>}/>
                    </Route>
                </Router>
              </Provider>
    }

}

import React，{Component，PropTypes}来自'React'；
从'react dom'导入{render}
从“redux”导入{createStore}
从“react redux”导入{Provider}
从“react Router”导入{Router，Route，IndexRoute，createMemoryHistory，useRouterHistory，routerReducer}
从“react router redux”导入{syncHistoryWithStore}
让我们回顾历史；
导出默认类传输扩展React.Component{
组件willmount（）{
myAjaxCall（函数（）{
//改道
appHistory.push（'/projectrepresentation'）；//更改路由器中的路由更改，但不显示/projectrepresentation
})
}
构造函数（）{
常数减速机=组合减速机({
路由：路由导出器
})
存储=创建存储（还原器）；
//创建增强的内部（！）历史记录，将导航事件与存储同步
让createAppHistory=useRouterHistory（createMemoryHistory）；
appHistory=createMemoryHistory（）；
历史=syncHistoryWithStore（appHistory，store）；
}
渲染（）{
返回
正在加载}>
项目表示法}/>
导出}/>
}
}

我被这个例子弄糊涂了。您不应该在

render（）

方法中创建

存储

、调用

combinereducer

、或

syncHistoryWithStore

。在应用程序的生命周期中，

render（）

方法可以被调用数千次！在每个渲染上都有效地重置了存储状态。相反，请将该代码移到文件的顶部，使其只执行一次。谢谢您的评论！我修改了这个例子，但不幸的是，它还不起作用。历史记录拾取ajax调用后的路由更改，但react router呈现的路由仍然是“/”而不是“/projectrepresentation”。我发现了问题：位于“/”的加载组件没有呈现任何子级。我被这个示例弄糊涂了。您不应该在

render（）

方法中创建

存储

、调用

combinereducer

、或

syncHistoryWithStore

。在应用程序的生命周期中，

render（）

方法可以被调用数千次！在每个渲染上都有效地重置了存储状态。相反，请将该代码移到文件的顶部，使其只执行一次。谢谢您的评论！我修改了这个例子，但不幸的是，它还不起作用。历史记录拾取ajax调用后的路由更改，但是路由器呈现的路由仍然是“/”而不是“/projectrepresentation”。我发现了问题：位于“/”的加载组件没有呈现任何子级。