使用React Browser历史记录推送会产生奇怪的错误重复组件

编程问答 2022-11-12

问题描述

我学会了反应，并为此问题创建了CodeSandbox

在顶部屏幕上，有两个按钮可以显示照片相册1和2。 默认值为专辑1。 按下按钮相册2显示相册，但它也会创建一个新的组件，因此有两个图库

我遵循了React History的教程，但是我一定错过了一些正确的东西，请咨询。 TimeLineViewer.js是一个拥有砖石风格画廊的画廊

是打给：

this.props.history.push({
  pathname: "/timeLineViewer",state: { week: "1" }
});

这会在现有的基础上注入一个新的画廊吗？

enter image description here

解决方法

由于两个专辑都使用了一条路线“ timelineViewer”，因此您无需推送新路线。

您可以创建一个用于更改专辑的处理程序，将其作为道具传递给RadioButtons，并将选择结果传递给TimelineViewer。

由于此代码段，自然有两个TimelineViewer组件。

        <div>
          <RadionButtons />
          <TimeLineViewer />
        </div>

        <Switch>
          <Route path="/timeLineViewer" component={TimeLineViewer} />
        </Switch>
react-router-domreactjsreactjs