0
224
VistasUna ruta no está cubierta en el componente de diseño, pero aún representa el diseño en React
Tengo problemas para hacer una ruta sin componente de diseño. Por favor revise mi código primero.
// 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> ) } En el código, <QuizBoxContainer> es el componente de diseño.
Lo que estaba tratando de hacer es hacer otro camino,
<Routes> <Route path='wrong-answer' element={<WrongAnswer />} /> </Routes> fuera de <QuizBoxContainer> para que pueda usar otro diseño en este componente.
Sin embargo, cuando voy a WrongAnswer,
Todavía rinde.
¿Qué está mal con mi código y cómo puedo solucionarlo?
1 Respuestas
Responde la pregunta0
Tema
Esto se debe a que el componente contenedor de diseño QuizBoxContainer no se representa en ninguna ruta, siempre se representa.
Solución
Mueva QuizBoxContainer a una ruta de diseño . Deberá actualizar QuizBoxContainer para que represente un componente Outlet en lugar del accesorio children .
Ejemplo:
import { Outlet } from 'react-router-dom'; const QuizBoxContainer = () => { ... return ( ... quiz container layout/styling ... <Outlet /> // <-- nested routes render content here ... ); }; QuizBoxContainer en una ruta de diseño que envuelva las rutas que desea representar dentro de él, renderice la ruta de respuesta incorrecta fuera de la ruta de diseño.
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> ) }