react-router-redux在位置更改时不更新页面

Question

我没有太多的运气使用redux版本的React-Router。当我将产品添加到购物车中时，位置确实会改变，但页面不会更新。

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import createHistory from 'history/createBrowserHistory';
import { ConnectedRouter, routerMiddleware } from 'react-router-redux';
import reducers from './reducers';
import App from './components/app';

const history = createHistory();
const store = createStore(
    reducers,
    applyMiddleware(routerMiddleware(history), thunk)
);

ReactDOM.render(
    <Provider store={store}>
        <ConnectedRouter history={history}>
            <App />
        </ConnectedRouter>
    </Provider>,
    document.getElementById('app')
);

import React from 'react';
import { BrowserRouter as Router, Link, Route } from 'react-router-dom';

import Cart from '../containers/cart';
import Home from './home';
import Checkout from '../containers/checkout';
import Products from '../containers/products';


const App = () => (
    <Router>
        <div className="app">
            <Route exact={true} path="/" component={Home} />
            <Route path="/cart" component={Cart} />
            <Route path="/checkout" component={Checkout} />
            <Route path="/products/:id/:url_title" component={Products} />
        </div>
    </Router>
);

export default App;

./减速器

import { reducer as FormReducer } from 'redux-form';
import { combineReducers } from 'redux';
import { routerReducer } from 'react-router-redux';

const rootReducer = combineReducers({
    router: routerReducer,
    other: otherReducers
});

export default rootReducer;

./行动

import { push } from 'react-router-redux';

export function addProduct(props) {
    return dispatch =>
        axios.post(`${ROOT_URL}/api`, props, config)
            .then(response => {
                dispatch(push('/cart'));
            })
    }

Answer 1

尝试将app.js连接到redux存储区，并通过MapStateToprops注入路由器道具。即使您没有显式地使用该道具，但现在只要该道具发生变化，组件就应该重新呈现它自己及其子组件。

react-router还提供了一个wishrouter更高阶组件来执行类似的操作。但是，在组件树的多个级别上使用ShouldComponentUpdate的应用程序中，我遇到了一些问题。