Estoy creando un clon de Amazon usando ReactJS y creo que tengo problemas para usar el paquete "react-router-dom".
Aquí está mi archivo App.js con mis líneas usando la función de enrutador
<Router> <div className="app"> <Routes> <Route path="/orders" element={< Header />, < Orders />} /> <Route path="/login" element={< Login />} /> <Route path="/checkout" element={< Header />, < Checkout />} /> <Route path="/payment" stripe={promise} element={ < Payment />} /> <Route path="/" element={< Header />, < Home />} /> </Routes> </div> </Router>Cada una de las páginas de localhost3000 funciona, pero la única que tiene un encabezado incluido en la página "/pago". Algunas soluciones que probé son actualizar el enrutador de reacción de v5 a v6, luego tuve que deshacer la función de cambio y cambiarla a la función de rutas. Además, he intentado ingresar al archivo Header.js y buscar cualquier cosa que pueda evitar que el encabezado aparezca en cada una de las páginas o por qué solo aparece en esa página.
¡Gracias!
El problema es, de hecho, con el valor pasado al element prop de los componentes de la Route . Lo que has hecho es usar el operador de coma .
element={<Header />, <Orders />} // <-- comma operatorOperador de coma (,)
El operador coma (
,) evalúa cada uno de sus operandos (de izquierda a derecha) y devuelve el valor del último operando. Esto le permite crear una expresión compuesta en la que se evalúan varias expresiones, siendo el valor final de la expresión compuesta el valor de la expresión más a la derecha de sus miembros. Esto se usa comúnmente para proporcionar múltiples parámetros a un buclefor.
En otras palabras, procesó todos los operandos y devolvió solo el último, el componente sin encabezado.
Para resolverlo, puede devolver una matriz de literales JSX
element={[<Header />, <Orders />]}o devolver un fragmento
element={( <> <Header /> <Orders /> </> )}Alternativamente, si renderizar un encabezado con una página es algo que haces comúnmente, abstrae esto en un componente de diseño.
import { Outlet } from 'react-router-dom'; const HeaderLayout = () => ( <> <Header /> <Outlet /> // <-- nested routes rendered here </> );...
<Router> <div className="app"> <Routes> <Route element={<HeaderLayout />}> <Route path="/orders" element={<Orders />} /> <Route path="/checkout" element={<Checkout />} /> <Route path="/" element={<Home />} /> </Route> <Route path="/login" element={< Login />} /> <Route path="/payment" stripe={promise} element={ < Payment />} /> </Routes> </div> </Router>Tengo razones para creer que está pasando incorrectamente los componentes dentro de cada element={...} <Route> .
Por favor, inténtalo:
react-router-dom sobre cómo pasar el componenteEjemplo de React Router v5
Solución 1
<Router> <Route path="/orders" component={Orders} /> </Router>Solución 2
<Router> <Route path="/orders"> <Orders/> </Route> </Router Lea más aquí en los ejemplos de documentos oficiales de react-router-dom v5
Ejemplo de React Router v6
<Routes> <Route path="/" element={<App />}> <Route index element={<Home />} /> </Routes? Lea más aquí en el ejemplo de documentos oficiales de react-router-dom v6.