react-router-redux не обновляет страницу при изменении местоположения

Мне не очень повезло с использованием редукционной версии react-router. Когда я добавляю товар в корзину, его местоположение изменяется, но страница не обновляется.

Это моя установка на данный момент. Все остальное работает с новым маршрутизатором, добавление товаров в корзину успешно возвращается с сервера REST. Однако использование push в моем файле действий не обновляет страницу.

index.js

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')
);

app.js

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'));
            })
    }

person Chris    schedule 16.04.2017    source источник


Ответы (1)


Попробуйте подключиться. app.js в хранилище избыточности и внедряя реквизит router через mapStateToProps. Несмотря на то, что вы явно не используете реквизит, ваш компонент теперь должен повторно отображать себя и своих дочерних элементов всякий раз, когда этот реквизит изменяется.

react-router также предлагает withRouter< /a> Компонент высшего порядка, чтобы сделать что-то подобное. Однако у меня были проблемы с его работой в приложениях, использующих shouldComponentUpdate на нескольких уровнях дерева компонентов.

person JWayne    schedule 07.02.2018