从反应-误差边界使用useErrorHandler钩子复位后行程的误差边界

Question

在应用程序抛出任何错误时，我使用react error边界包来显示掉落的UI。这个包裹对我很好。我需要了解如何重置应用程序错误状态，如果我转到以前的页面，使用浏览器返回按钮，因为回到以前的页面，也显示掉的UI，而不是原来的组件。无论如何，我们可以呈现原始组件吗？

在下面的代码中，用户将在Page2上抛出错误，因为我将空对象作为支持传递。在这种情况下，它将显示后备屏幕。如果我单击“后退”按钮，仍然会在Page1上显示后备屏幕，这是我不希望看到的。

App.js

const errorHandler = (error) =>{
      console.log(error)
}

<BrowserRouter basename={'/bookingtool/obt/'}>
     <ErrorBoundary FallbackComponent={Fallback} onError={errorHandler}>
          <Routes>
               <Route path="/page1" element={<Page1 PageName="Page1" />} />
               <Route path="/page2" element={<Page2 PageName={{}} /> } />
          </Routes>
    <ErrorBoundary />
</BrowserRouter>

Page1.js

import { useErrorHandler } from 'react-error-boundary';
const Page1 = ({PageName}) =>{
     return(<p>{PageName}</p>)
}

Page2.js

import { useErrorHandler } from 'react-error-boundary';
const Page2 = ({PageName}) =>{
     return(<p>{PageName}</p>)
}

Fallback.js

import React from "react";

const Fallback= (props) => {
    return(<h1>Something went wrong</h1>)
}

Answer 1

向key提供<ErrorBoundary />。每当key更改时，错误边界就会被重置。

在您的示例中，使用useLocation().pathname作为key意味着每当路径更改时它都会重置：

const location =  useLocation();

// ...
return (
  <ErrorBoundary key={location.pathname}>
    {/* ... */}
  </ErrorBoundary>
)

作为一个单独的建议，我会将错误处理移到布局组件中。这将允许在发生错误时保持导航，这是很好的UX。

基本的这里的例子。

Answer 2

当您导航到别处时，尝试重置错误状态：

const Fallback= ({ error, resetErrorBoundary} ) => {
    const location = useLocation();
    const errorLocation = useRef(location.pathname);
    useEffect(() => {
        if (location.pathname !== errorLocation.current) {
            resetErrorBoundary();
        }
    },[location.pathname])
    return(<h1>Something went wrong</h1>)
}

Answer 3

您可以使用以下方式强制重新呈现错误边界，首先创建一个单独的函数组件来保存错误边界，然后将侦听器添加到历史记录中。

import { createBrowserHistory } from "history";
const history = createBrowserHistory();
//a fallback component
const ErrorFallback = () => {
 return <>
   <h1>Something went wrong.</h1>
   <button onClick={() => {
      history.back();
    }}>go back </button>
  </>
}
 
function RoutesContainer() {
 const [update, setUpdate] = useState(false);
 let navigate = useNavigate();
const historyChange = () => {
if (window.location.pathname !== history.location.pathname) {
  navigate(window.location.pathname, { replace: true });
}
};
useEffect(() => {
 history.listen(historyChange)
}, [historyChange])

 return <ErrorBoundary key={window.location.pathname}  FallbackComponent={ErrorFallback}>
<Routes>
  <Route path="/page1" element={<Page1 PageName="Page1" />} />
  <Route path="/page2" element={<Page2 PageName={{}} />} />
</Routes>
 </ErrorBoundary>
  }

当您从page1返回到page2时，history.location.pathname将具有"page2“值，因为您按后退，此值将与window.location.pathname不匹配，因为window.location.pathname具有"page1”值，在此阶段，我们将导航到window.location.pathname，并将此值用作错误边界component.at中的键--我使用了react路由器-dom V6和react v18。

这里有一个完整的用例演示。

    import React, { useEffect, useState } from 'react';
    import { BrowserRouter, Link, Route, Routes } from 'react-router-dom';
    import { createBrowserHistory } from "history";
    import { useNavigate } from "react-router-dom";
    import { ErrorBoundary } from 'react-error-boundary'

    const history = createBrowserHistory();

    const ErrorFallback = () => {
      return <>
        <h1>Something went wrong.</h1>
        <button onClick={() => {
          history.back();
        }}>go back </button>
      </>
    }
    const Page1 = ({ PageName }) => {
      return (<p>{PageName}
        <Link to={'/page2'} >page 2</Link>
      </p>)
    }

    const Page2 = ({ PageName }) => {
      return (<p>{PageName}</p>)
    }
    function RoutesContainer() {
      const [update, setUpdate] = useState(false);
      let navigate = useNavigate();

      const historyChange = () => {
        if (window.location.pathname !== history.location.pathname) {
          navigate(window.location.pathname, { replace: true });
        }
      };

      useEffect(() => {
        history.listen(historyChange)
      }, [historyChange])

      return <ErrorBoundary key={window.location.pathname}  FallbackComponent={ErrorFallback}>
        <Routes>
          <Route path="/page1" element={<Page1 PageName="Page1" />} />
          <Route path="/page2" element={<Page2 PageName={{}} />} />
        </Routes>
      </ErrorBoundary>
    }


    function App() {
      return (
        <BrowserRouter><RoutesContainer /></BrowserRouter>
      );
    }

    export default App;