history.replace 在反应路由器 dom v5.2 中不起作用

Question

我觉得我在做坏事。 当单击我的列表中的一个项目时，我试图重新加载相同的 url ( /timetable )，但更改了状态。 但是当我在那个端点上时，当我点击其他ListItem时没有任何反应。 我的意思是我在/timetable ， state = {semester: true} ，当我点击第二个项目时，没有任何变化。

我从react-router-dom获取const history = useHistory 。

<List component="div" disablePadding>
          {HorarioElements.map(({ text, icon, route, state }) => (
            <StyledListItem
              button
              key={text}
              onClick={() => {
                history.replace('/timetable', state)
              }}
            >
              <ListItemIcon>{icon}</ListItemIcon>
              <ListItemText primary={text} />
            </StyledListItem>
          ))}
</List>

HorarioElements数组如下：

const HorarioElements = [
  {
    text: '1er semestre',
    icon: <Filter1Icon />,
    state: { semester: true },
  },
  {
    text: '2do semestre',
    icon: <Filter2Icon />,
    state: { semester: false },
  },
]

任何人都知道这样做的正确方法是什么？

Answer 1

React Router history.replace的state与您的应用程序状态不同——它是存在于history对象本身的状态。 您很少需要使用它。

要在保持在同一页面上的同时更改您的应用程序状态，您需要useState （适用于限定于组件或其直接子useContext的状态）或useContext （适用于适用于整个应用程序或应用程序的重要子树的状态）。