如何使用帶有 react-router-dom 的全局 state 顯示模式？

Question

我的 React 應用程序使用 react-router-dom 進行導航。 在這些路由的每個不同組件中，當出現問題時，可能需要顯示某種形式的錯誤模態組件。 無需將相同的錯誤模式導入每個需要它的組件，在父級中管理 state 並聲明切換函數，我想在所有其他組件之外執行一次，並在需要時顯示通用錯誤模式。

我懷疑我可能需要使用 Context API 但我之前沒有使用過它。

我找到了這篇文章，但我不確定如何使用具有多條路由的應用程序來實現它。

理想情況下，我想從 index.js 中的 axios 攔截器觸發模式，並在用戶所在的任何頁面頂部顯示模式。

索引.js：

    //imports...
    axios.interceptors.response.use(undefined, err => {
      if (err.response.status === 500) {
        // Set show state for error modal here
      }
    
      return Promise.reject(err); 
    });

    ReactDOM.render(<App />, document.getElementById('root'));

應用程序.js：

  import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
  // other imports...

  const App = () => {
    return (    
        <Router>
              <Routes>
                <Route path='/page1' element={<Page1 />}></Route>
                <Route path='/page2' element={<Page2 />}></Route>
              </Routes>
          </Router>     
      );
  };

Answer 1

我實際上能夠使用上下文 API 解決與此類似的問題。請參閱下面的簡要說明：

創建你的 ModalProvider

export const ModalProvider = (props) => {
    const createModal = () => { // ...some modal init code here }
    return (
        <ModalContext.Provider value={{ createModal }}>
            <Modal/>
            {props.children}
        </ModalContext.Provider>
    )
}

然后，您可以將您的應用程序包裝在該提供程序中，並且在訪問上下文時您應該有權訪問 createModal function。 希望這可以幫助！