1

我正在尝试让 react-router 和 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>
    }

}
4

0 回答 0