好的，所以我在互聯網上搜索了如何執行此操作的示例，但不幸的是我無法這樣做。基本上我有一個這樣的組件結構：
應用程式.js
class App extends Componenent {
render() {
return (
<Routes>
<Route path='/signin' exact element={<SignIn />} />
<Route path='/admin' exact element={<Admin />} >
<Route path='home' exact element={<Home/>} />
<Route path='settings' exact element={<Settings/>} />
</Route >
);
}
}
export default App;
管理員.jsx
import { useLocation, Outlet } from "react-router-dom";
const Admin = props => {
const location = useLocation();
return (
<div>
<p>Parent</p>
<div>
<Outlet context={'foo'} />
</div>
</div>
}
export default Admin;
設定.jsx
import React from "react";
const Settings = props => {
const context = useOutletContext();
console.log(context);
return (
<React.Fragment>
<p>settings</p>
</React.Fragment>
}
export default Settings;
但是，每次我加載頁面時，都會收到一條錯誤訊息：
'useOutletContext' is not defined no-undef
應用程式崩潰。但是，當我使用 chrome react 除錯面板查看我的組件樹時，背景關系就在插座中，我只是不知道如何訪問它。以下是一些螢屏截圖，以便我們在同一頁面上：
背景關系在出口
相同的資料現在在 Context.Provider 中作為“值”
在 Route.Provider 中無處可見
在設定組件中無處可見
Any and all help here would be appreciated, I am just not entirely sure of how to use useOuletContext(); even if I used followed the steps in the docs. Do I have to import it from somewhere? Does it have to be in the same file for it to work?
uj5u.com熱心網友回復：
是的，它仍然需要在使用它的檔案中匯入，即import { useOutletContext } from 'react-router-dom';.
import React from "react";
import { useOutletContext } from 'react-router-dom';
const Settings = props => {
const context = useOutletContext();
console.log(context);
return (
<React.Fragment>
<p>settings</p>
</React.Fragment>
);
}
export default Settings;
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/426578.html