我正在使用18.2.0帶有react-router-dom版本的 React6.3.0
在我的應用程式中，我想使用 Context API 進行狀態管理。下面是我的背景關系創建代碼：
export const QuoteContext = React.createContext();
export const QuoteContextProvider = ({ children }) => {
const [quotes, setQuotes] = useState([]);
const [isLoading, setIsLoading] = useState(false);
const addQuote = (quoteData) => {
// logic to add a quote to state
};
<QuoteContext.Provider value={{ quotes, addQuote }}>
{children}
</QuoteContext.Provider>;
};
下面是我App.JS使用路由的檔案：
function App() {
return (
<>
<Header />
<QuoteContextProvider>
<Routes>
<Route path="/" element={<Home />}></Route>
<Route path="/add" element={<NewQuote />}></Route>
<Route path="/:quote" element={<Details />}></Route>
</Routes>
</QuoteContextProvider>
</>
);
}
下面是我的index.js
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
通過所有這些設定，當我運行應用程式時<Header>，瀏覽器螢屏上只顯示組件，沒有激活其他路由端點。即使我手動更改瀏覽器 URL，也沒有任何反應。我在這里想念什么？
uj5u.com熱心網友回復：
QuoteContextProvider是問題所在。您將所有內容都包裝在其中，但沒有回傳任何內容。試試這個：
export const QuoteContext = React.createContext();
export const QuoteContextProvider = ({ children }) => {
const [quotes, setQuotes] = useState([]);
const [isLoading, setIsLoading] = useState(false);
const addQuote = (quoteData) => {
// logic to add a quote to state
};
return <QuoteContext.Provider value={{ quotes, addQuote }}>{children}</QuoteContext.Provider>;
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/503649.html
標籤：javascript 反应 反应路由器 反应路由器dom 反应上下文
上一篇：在React中控制
下一篇：合并陣列中的重復元素