Javascript 如何在react路由器中重置位置状态

我按照react router文档创建受保护的路由，对于未经验证的请求，我按照以下方式重定向用户：

<Redirect to={{
  pathname: '/input-number',
  state: { from: props.location },
}} />

现在，在重定向组件上，我使用以下逻辑显示一条错误消息：

      this.props.location.state && this.props.location.state.from &&
      (
        <Grid.Row>
          <Grid.Column>
            <Message negative>
              <Message.Header>You must be logged in to visit the page</Message.Header>
            </Message>
          </Grid.Column>
        </Grid.Row>
      )

this.props.location.state&&this.props.location.state.from&&
(
您必须登录才能访问该页面
)

问题是，当用户重新加载时，与位置关联的页面状态未被清除，并且一旦用户被重定向到登录组件，每次刷新时都会显示错误消息。我正在寻找一种方法来清除这个州。我想这一定是可能的，不需要设置一些应用程序状态

更新：为了清晰起见，我添加了完整的PrivateRoute：

`

导出默认函数PrivateRoute（{component:component，…rest}）{
const isAuthenticated=localStorage.getItem（访问令牌）；
返回(
(
我被认证了(
) : (
)
)}
/>);
}

---

`

在React应用程序的初始设置过程中，为您的

创建

历史记录

对象时，您可以将历史记录位置上的状态替换为不包含

from

道具的状态

const history = createHistory();
if (history.location && history.location.state && history.location.state.from) {
  const state = { ...history.location.state };
  delete state.from;
  history.replace({ ...history.location, state });
}

---

此外，还可以替换状态，而无需合并其未触及的位置：

const { state } = this.props.location;
if (state && state.copySurveyId) {
  this.duplicateSurvey(state.copySurveyId);
  const stateCopy = { ...state };
  delete stateCopy.copySurveyId;
  this.props.history.replace({ state: stateCopy });
}

---

这可能不是最理想的方法，但在我的例子中，最简单的处理方法是使用

history.replace（）

，并用相同的URL替换当前URL，但忽略location state对象（也适用于参数）。但是，您必须小心，只有在使用location state对象或参数的值后才能替换URL。就我而言：

//应用程序中的位置：

    history.push("to/app/route", {
      contentOfLocationState: true
    });

//在映射到上述管线的组件中

function (){
    try {
      // Post to API
      Post(...{ contentOfLocationState });
    } catch (e) {
      // error
    } finally {
      history.replace("to/app/route");
    }

---

PS：使用@robert farley描述的技术，react路由器将开始运行并为我显示白色屏幕。虽然我的设置可能有问题，但history.replace会刷新页面。我们可以不刷新页面就完成吗？

function (){
    try {
      // Post to API
      Post(...{ contentOfLocationState });
    } catch (e) {
      // error
    } finally {
      history.replace("to/app/route");
    }