3
使用react-router的redux版我還沒有多少運氣。當我將產品添加到購物車時,位置確實會更改,但頁面不會更新。react-router-redux不更新位置更改頁面
這是我迄今爲止的設置。其他所有功能都可以在新的路由器上添加項目到購物車,從而成功地從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;
./reducers
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;
個./actions
import { push } from 'react-router-redux';
export function addProduct(props) {
return dispatch =>
axios.post(`${ROOT_URL}/api`, props, config)
.then(response => {
dispatch(push('/cart'));
})
}