作为使用 React、React-router 和 Redux 的练习,我正在制作一个非常小的应用程序,它有两个模型:真空和商店。在我的应用程序中,您可以查看所有吸尘器、所有商店、单个吸尘器或单个商店。您可以从单页面 View 中添加和删除吸尘器和商店的实例。
我遇到的问题是,删除真空或商店后,我的应用程序会崩溃,因为路线不再存在。
我尝试添加 NotFound 组件和路由,但因为我在路由 (/vacuums/:id) 内使用变量,所以它确实到达了那里。
<Switch>
<Route exact path="/stores" component={Allstores} />
<Route exact path="/stores/add" component={storesAddForm} />
<Route exact path="/stores/:storeId" component={Singlestores} />
<Route exact path="/vacuums" component={Allvacuums} />
<Route exact path="/vacuums/add" component={vacuumsAddForm} />
<Route exact path="/vacuums/:vacuumsId" component={Singlevacuums} />
<Route component={NotFound} />
</Switch>
使用 redux 删除函数:
export const REMOVE_VACUUM = 'REMOVE_VACUUM';
export const removeVacuum = vacuumId => {
return {
type: REMOVE_VACUUM,
vacuumId: vacuumId,
};
};
const deleteVacuum = id => {
return async (dispatch, getState) => {
const deleted = await axios.delete(`/api/allVacuums/${id}`);
dispatch(removeVacuum(id));
};
};
const rootReducer = (state = initialState, action) => {
switch (action.type) {
case REMOVE_VACUUM:
const arr = state.vacuums.filter(
vacuum => vacuum.id !== action.vacuumId
);
return { ...state, vacuums: arr };
}
}
最佳答案
由于您使用的是 redux,因此从您的 Singlevacuums
组件将 this.props.history
从组件传递到您的 deleteVacuum
操作创建者:
import React, { PureComponent } from 'react';
import { deleteVacuum } from '../actions/vacuumActions';
class Singlevacuums extends PureComponent {
handleClick = id => {
const { deleteVacuum, history } = this.props;
deleteVacuum(id, history); // delete vacuum action action creator
}
render = () => (
<div>
{this.props.vacuums.map(({ id }) => (
<button id={id} onClick={() => this.handleClick(id)}>Delete Vacuum</button>
))}
</div>
)
}
export default connect(state=> ({ vacuums: state.vacuums }), { deleteVacuum })(Singlevacuums)
然后在你的 Action 创建者中(总是尝试/捕获
你的 promise ,否则,当它们失败时——它们会——你的应用程序不会崩溃!!!):
const deleteVacuum = (id, history) => async dispatch => {
try {
await axios.delete(`/api/allVacuums/${id}`); // remove vacuum from API
dispatch(removeVacuum(id)); // remove vacuum from redux state
history.push('/'); // redirect user to "/" or where ever
catch (err) {
console.error(err);
}
};
关于javascript - React 和 Redux 中删除页面/路由后重定向,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52859834/