How do I clear location.state in react-router on page reload?

在React Router中，location.state 用于在路由间传递状态信息。但是，有时候我们不希望这些状态在页面重新加载后仍然保留。要在页面重新加载时清除location.state，可以通过以下几种方式来实现：

1. 使用 Redirect 组件

一种简单直接的方法是，在组件中检测到特定的location.state后，使用<Redirect>组件来重定向到同一路由但不带任何state。这样可以清除state。

示例代码:

jsx
import React from 'react';
import { Redirect } from 'react-router-dom';

class MyComponent extends React.Component {
  render() {
    const { state } = this.props.location;

    if (state && state.needToClear) {
      // 使用 Redirect 组件重定向到相同的路径但不带state
      return <Redirect to={this.props.match.url} />;
    }

    return <div>页面内容</div>;
  }
}

这种方法会导致组件重新渲染两次，一次是带有原始state的渲染，一次是清除state后的渲染。

2. 在组件中手动操作 History 对象

另一种方法是通过编程方式修改history对象，将location.state设置为undefined或者新的状态。

示例代码:

jsx
import React from 'react';
import { withRouter } from 'react-router-dom';

class MyComponent extends React.Component {
  componentDidMount() {
    const { location, history } = this.props;

    if (location.state && location.state.needToClear) {
      // 替换当前条目，没有state
      history.replace(location.pathname, null);
    }
  }

  render() {
    return <div>页面内容</div>;
  }
}

export default withRouter(MyComponent);

这种方法通过history.replace()直接替换掉当前的历史条目，用一个没有state的新条目替换，从而避免了不需要的state在页面刷新时保留。

3. 利用 useEffect 清理 State

如果你使用的是函数组件与Hooks，可以利用useEffect来处理副作用。

示例代码:

jsx
import React, { useEffect } from 'react';
import { useLocation, useHistory } from 'react-router-dom';

function MyComponent() {
  const location = useLocation();
  const history = useHistory();

  useEffect(() => {
    if (location.state && location.state.needToClear) {
      history.replace(location.pathname, null); // 或者使用 {}
    }
  }, [location, history]);

  return <div>页面内容</div>;
}

在这个例子中，一旦组件挂载完毕，useEffect会检查location.state，如果需要清除state，就通过history.replace()来更新历史条目，达到清除state的目的。

总结

以上方法中，选择哪一种取决于你的应用需求和你偏好的React编程模式（类组件还是函数组件）。制定标准流程和统一处理逻辑可以避免潜在的bug，提高应用的健壯性。