Estoy tratando de crear varias páginas de reacción, pero la reacción no muestra ninguna de las páginas nuevas. Creo que mi código es correcto, estoy usando npm install react-router-dom@6 y este es mi código: Index.js
ReactDOM.render( <BrowserRouter> <Routes> <Route path="/" element={<App />}> <Route path="pricing" element={<Pricing />} /> <Route path="contact" element={<Contact />} /> </Route> </Routes> </BrowserRouter>, document.getElementById('root') );en la barra de navegación.jsx:
<Link to="/pricing">Pricing</Link> <Link to="/contact">Contact</Link>y por ejemplo Precios.js :
<div className='Pricing'> <Navbar /> </div>Algúna idea de cómo arreglar esto ? donde me lo he perdido exactamente?
Primero te falta / en algún camino. En segundo lugar, la primera Ruta los atrapará a todos, porque todos comienzan con / . Para evitar eso, necesita la palabra clave exact , así:
ReactDOM.render( <BrowserRouter> <Routes> <Route exact path="/" element={<App />} /> <Route exact path="/pricing" element={<Pricing />} /> <Route exact path="/contact" element={<Contact />} /> </Routes> </BrowserRouter>, document.getElementById('root') );/ falta en su código y también usa la propiedad exacta para que coincida con la URL exacta.
ReactDOM.render( <BrowserRouter> <Routes> <Route path="/" exact element={<App />}> <Route path="/pricing" exact element={<Pricing />} /> <Route path="/contact" exact element={<Contact />} /> </Route> </Routes> </BrowserRouter>, document.getElementById('root') );