Los componentes de registro e inicio de sesión deben agregarse a la clase de contenedor. Seguí un curso de reacción en Udemy. Están usando una versión anterior de react-router-dom. Para esto, utilicé v6 react router dom e hice cambios, pero este no sé qué hacer. Este código es nuevo para mí, por favor ayúdame.
function App() { return ( <Router> <Fragment> <Navbar /> <Routes> <Route exact path='/' element={<Landing />} /> <section className='container'> <Route exact path='/register' element={Register} /> <Route exact path='/login' element={Login} /> </section> </Routes> </Fragment> </Router> ); }error en la consola
[section] is not a <Route> component. All component children of <Routes> must be a <Route>Creo que el error es bastante descriptivo en sí mismo. Que los hijos de <Routes /> solo puedan ser <Route /> y <section /> no satisface eso.
Si necesita los componentes Register e Login de sesión para tener un contenedor de section con clase .container .
Podemos lograrlo a través de diferentes enfoques, aquí hay algunos de ellos.
Por ejemplo:
/** * 1. Putting them inside the components itself */ const Register = () => { return ( <section className="container"> // your other codes here </section> ) } const Login = () => { return ( <section className="container"> // your other codes here </section> ) } /** * 2. As a reusable Layout wrapper or Higher Order Component or * Useful when you have many shared contents and styling */ const Container = (props) => { return ( <section className="container"> // shared contents {props.children} // other shared contents </section> ); } const Register = () => { return ( <Container> // your other codes here </Container> ) } const Login = () => { return ( <Container> // your other codes here </Container> ) }Espero que ayude.
Como le informa el error, solo Route o React.Fragment son elementos secundarios válidos del componente Routes .
Si desea representar varios componentes enrutados en un diseño específico, es decir, una interfaz de usuario/diseño común, cree una ruta de diseño para anidarlos.
¡Asegúrese también de hacer Register e iniciar Login como JSX!
Ejemplo:
import { Outlet } from 'react-router-dom'; const SectionLayout = () => ( <section className='container'> <Outlet /> // <-- nested routes render content here </section> ); export default SectionLayout;...
import SectionLayout from '../path/to/SectionLayout'; ... <Routes> <Route path='/' element={<Landing />} /> <Route element={<SectionLayout />}> <Route path='/register' element={<Register />} /> <Route path='/login' element={<Login />} /> </Route> </Routes>Para más información, ver: