Javascript 删除请求后重新加载当前路由

我正在React中编写一个CRUD应用程序，我想在使用“Axios”的删除请求之后重新加载当前路由，其中包括对象的“id”和“name”。 删除对象时，页面不会重新加载，显示的数据与删除前相同。 我试过历史，但没用。 这其实是我想做的：

history.push（

/addScenarioDetail/${scenarioId}/${name}

）

export default const AddScenarioDetail=（{match}:Props）=>{
常数{
参数：{id}，
参数：{name}
}=匹配；
const classes=useStyles（）；
const[scenarioId，setScenarioId]=使用状态（“”）；
const[layouts，setLayouts]=useState（[]）；
const[displays，setDisplays]=useState（[]）；
const[details，setDetails]=useState（[]）；
const[layoutId，setLayoutId]=useState（“”）；
const[displayId，setDisplayId]=useState（“”）；
常量[layoutName，setLayoutName]=useState（“”）；
const[displayName，setDisplayName]=useState（“”）；
const[detailsNames，setDetailsNames]=useState（[]）；
让历史=使用历史（）；
const[open，setOpen]=React.useState（false）；
useffect（（）=>{
让我们忽略=错误；
让num=parseInt（id，10）
setScenarioId（num）；
异步函数fetchData（）{
const layoutPromise=axios（“http://localhost:8080/xiboscenario/layouts");
const displayPromise=axios（“http://localhost:8080/xiboscenario/displays");
const detailPromise=axios(`http://localhost:8080/xiboscenario/${id}/detail`）；
const layoutResult=等待布局承诺；
const displayResult=等待显示承诺；
const detailResult=等待detailPromise；
如果（！忽略）{
设置布局（布局结果数据）；
设置显示（displayResult.data）；
setDetails（detailResult.data）；
}
}
fetchData（）；
return（）=>{ignore=true；}
}，[id]）；
异步函数handleSubmit（e）{
e、 预防默认值（）；
等待axios({
方法：“post”，
网址：`http://localhost:8080/xiboscenario/${scenarioId}/detail`，
数据：{
场景id：场景id，
display\u id:displayId，
布局\u id:layoutId
}
});
push（`/addScenarioDetail/${scenarioId}/${name}`）；
};
异步函数removeDetail（id）{
等待axios.delete(`http://anpr.sportpaleisgroep.be:28080/xiboscenario/${scenarioId}/detail`{
数据：{
场景详细信息\u id:id
}
})
//push（`/addScenarioDetail/${scenarioId}/${name}`）；
}
常量handleClickOpen=（）=>{
setOpen（真）；
};
常量handleClose=（）=>{
setOpen（假）；
};
返回(
添加细节
{name}
option.layout_name）}
id=“受控演示”
值={layoutName}
onChange={handleLayoutChange}
renderInput={params=>(
)}
/>
选项。显示（名称）}
id=“受控演示”
值={displayName}
onChange={handleDisplayChange}
renderInput={params=>(
)}
/>


拯救


)
}

这是我的路由器：

    <div className="App">
      <Navbar />
      <BrowserRouter>
        <Switch>
          <Route path='/' exact={true} component={Home} />
          <Route path='/scenarioTable' component={ScenarioTable} />
          <Route path='/showScenarios' component={ShowScenarios} />
          <Route path='/update/:id' component={updateScenario} />
          <Route path='/addScenarioDetail/:id/:name' component={AddScenarioDetail} />
        </Switch>
      </BrowserRouter>
    </div>

如果你做一个
历史记录。用
react router
在同一页面上推压
，这不会有多大作用，因为react会看到它将显示相同的组件，所以它不会全部卸载/重新装载它们，这就是react背后的想法：只会更改需要更改的组件

相反，在删除之后，您需要的只是更新您的状态，以便更新您的UI

通常，执行
setState
而不是
history.push
，该操作将更新除已删除项目外的所有项目的状态。
在历史记录中为动态url'/addScenarioDetail/:id/:name'推送不同变量（id、名称）的相同url不会重新加载内容。您需要自己在该组件中检查更新的路由。检查下面的代码

componentDidUpdate = (prevProps) => {
    if (this.props.match.params.id !== prevProps.match.params.id || this.props.match.params.name !== prevProps.match.params.name) {
        //do required action here like updating state, fetching new data from api
    };
};

我相信一个简单的
window.location.reload（）
就足以重新加载页面

如果需要在不同的URL重新加载，只需
window.location=“OTHER_URL”

另外，从您的代码来看，您似乎使用了大量的
useState（）
，如果您的状态是“复杂的”，我建议您看看
useReducer（）

此处链接到文档：
这将重新加载所有页面，有点失去了单页应用程序的概念，很难……因为表中使用的状态是在另一个
useffect（）
中创建的，它基于一个我无法使用的API
useState（）
直接删除处理程序。这就是我创建状态的方式：
useffect（（prevProps）=>{async function fetchData（）{const detailsName=[]；let layout_name=''；let display_name=''；let detail_id=''；for（let detail of details）{detail_id=detaily.detaily_id for（let display of displays）{
componentDidUpdate = (prevProps) => {
    if (this.props.match.params.id !== prevProps.match.params.id || this.props.match.params.name !== prevProps.match.params.name) {
        //do required action here like updating state, fetching new data from api
    };
};