React-router: Dispatching push has no effect with [email protected]

Created on 17 Apr 2017 · 1Comment · Source: ReactTraining/react-router

Hey there! I'm having some trouble using the dispatch methods included with react-router-redux.
When i'm locate on http://127.0.0.1 and dispatch push('/search?word=1') it seemed to work.But when i'm locate on http://127.0.0.1/search?word=1 and dispatch push('/search?word=2') it is no effect（i can't see router/LOCATION_CHANGE action from redux log）.

http://127.0.0.1 --> dispatch.push('/search?word=1') right
http://127.0.0.1/search?word=1 --> dispatch.push('/search?word=2') no effect

so I'm not sure whether I'm wiring something up wrong or there's a compatibility issue.

My code:

import React from 'react'
import ReactDOM from 'react-dom'
import { createStore, combineReducers, applyMiddleware } from 'redux'
import { Provider } from 'react-redux'
import thunk from 'redux-thunk'
import logger from 'redux-logger'
import reducers from './redux/reducers'
import { ConnectedRouter, routerReducer, routerMiddleware} from 'react-router-redux'
import Home from './containers/Home/Home.js'
import Search from './containers/Search/Search.js'
import { Route } from 'react-router-dom'
import createHistory from 'history/createBrowserHistory'

const history = createHistory();
let middleware = [ thunk ];
let store;

middleware.push(routerMiddleware(history));

if (process.env.NODE_ENV !== 'production') {
    middleware.push(logger);
}

store = createStore(
    combineReducers({
        ...reducers,
        router: routerReducer
    }),
    applyMiddleware(...middleware)
);

ReactDOM.render(
    <Provider store={store}>
        <ConnectedRouter history={history}>
            <div id="router-wrapper">
                <Route exact path="/" component={Home} />
                <Route path="/search" component={Search} />
            </div>
        </ConnectedRouter>
    </Provider>,
    document.getElementById('wrapper')
);

import React from 'react'
import {connect} from 'react-redux'
import utils from '../../utils/utils.js'
import { push } from 'react-router-redux'

import {SearchForm} from '../../components/index.js'

class SearchFormContainer extends React.Component{

    constructor(props) {
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSubmit(word) {

        let query = {
            word: word
        };

        query = utils.linkQuery(query);

        $.ajax({
            url: 'http://' + window.location.host + '/api/search?' + query,
            method: 'GET',
            success: function (result) {
                this.props.push(`/search?word=${word}`);
            }.bind(this)
        });
    }

    render(){

        return (
            <SearchForm handleSubmit={this.handleSubmit} focus={this.props.focus} style={this.props.style} word={this.props.word} />
        );
    }
}

const mapStateToProps = (state) => {
    let word = state.search.word;

    return {
        word
    }
};

const mapDispatchToProps = (dispatch, state) => {

    return {
        push: (path) => {
            dispatch(push(path));
        }
    }
};

export default connect(mapStateToProps, mapDispatchToProps)(SearchFormContainer);

Please help me to solve the problem. Thanks in advance for your help.

Source