当我导航到其他路由器页面时，如何清除由错误边界创建的自定义消息

Question

我是React JS的新手。我想在我的应用程序中使用错误边界，它使用反应路由器显示链接以导航到不同的组件页面。当我使用错误边界时，在组件页面中添加一次的自定义错误消息始终在其他组件页面中可用。当我导航到其他页面（URL）时，如何清除由错误边界创建的客户错误消息？

Answer 1

假设您可以访问您的错误消息（示例使用redux，但不是修饰），使用react-router，您可以访问history，每次更改网址时都会更新。

在您的应用程序级别，您可以在app.js中收听该历史记录（它应该在您的应用程序入口点）

class App extends Component {
  constructor(props){
    super(props);

    //listen on url change
    history.listen((location, action) => {
      // clear erorr on location change
      props.dispatch(erorrActions.clear()); // using redux, but you could use you're own provider / sevice

    });
  }
}

历史必须注入你的应用程序，如

你的history.js：

import { createBrowserHistory } from 'history';
export const history = createBrowserHistory();

你的index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import { Router } from 'react-router-dom';

import { history } from './history';
import { App } from './App';

ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
      <App/>
    </Router>
  </Provider>, document.getElementById('root'));