如何使用react router dom显示使用全局状态的模式

Question

My React应用程序使用React路由器dom进行导航。在这些路线的每个不同组件中，当出现问题时，可能需要显示某种形式的错误模式组件。我不需要将相同的错误模式导入到每个需要它的组件中，管理父级中的状态并声明切换函数，而是希望在所有其他组件之外执行一次，并在需要时显示通用错误模式。

我怀疑我可能需要使用Context API，但我以前没有使用过它。

我找到了这篇文章，但我不知道如何用我的具有多个路由的应用程序来实现它。

理想情况下，我想从我的index.js中的axios拦截器触发模态，并在用户所在的任何页面上显示模态

index.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'));

App.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函数。希望这能有所帮助！