我不得不在沒有布局組件的情況下制作路線。請先檢查我的代碼。
// App.js
const App = () => {
return (
<div className={styles.container}>
<Header />
<main>
<QuizBoxContainer>
<Routes>
<Route path='/' element={<QuizSelect />} />
<Route path='quiz-for/:language' element={<QuizCard />} />
<Route path='result' element={<ResultPage />} />
</Routes>
</QuizBoxContainer>
<Routes>
<Route path='wrong-answer' element={<WrongAnswer />} />
</Routes>
</main>
</div>
)
}
在代碼中，<QuizBoxContainer>是布局組件。
我想做的是另辟蹊徑，
<Routes>
<Route path='wrong-answer' element={<WrongAnswer />} />
</Routes>
所以我可以在<QuizBoxContainer>這個組件上使用另一個布局。
然而，當我去 WrongAnswer 時，
它仍然呈現。
我的代碼有什么問題，我該如何解決？
uj5u.com熱心網友回復：
問題
這是因為QuizBoxContainer布局包裝器組件不會在任何路由上呈現，它總是被呈現。
解決方案
進入QuizBoxContainer布局路線。您需要更新QuizBoxContainer，以便它呈現Outlet組件而不是children道具。
例子：
import { Outlet } from 'react-router-dom';
const QuizBoxContainer = () => {
...
return (
... quiz container layout/styling ...
<Outlet /> // <-- nested routes render content here
...
);
};
QuizBoxContainer在包含要在其中渲染的路由的布局路由上渲染，在布局路由之外渲染錯誤的答案路由。
const App = () => {
return (
<div className={styles.container}>
<Header />
<main>
<Routes>
<Route element={<QuizBoxContainer />}>
<Route path='/' element={<QuizSelect />} />
<Route path='quiz-for/:language' element={<QuizCard />} />
<Route path='result' element={<ResultPage />} />
</Route>
<Route path='wrong-answer' element={<WrongAnswer />} />
</Routes>
</main>
</div>
)
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/487485.html