Question

我正在努力让react-router和redux一起工作。当我的组件安装时，我进行了一个ajax调用，直到这个完成，我想显示一个加载消息。一旦ajax-call成功返回，我就会重新路由到正确的页面。但是，每当我以编程方式更改路由时，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>
    }

}

React-router不会同步历史记录和Redux存储

0 个答案: