Estoy tratando de seguir un tutorial mientras aprendo React.JS y me encuentro con un problema porque el tutorial usa una versión anterior de React y estoy atascado tratando de descubrir cómo usar BrowserRouter , Routes y Route .
¿Alguien puede ayudarme a tratar de reestructurar el código para que funcione con la versión actualizada de React? Intenté leer la documentación y traté de mezclar algunas soluciones sin éxito. ¡Cualquier ayuda es muy apreciada!
import React from 'react'; import { BrowserRouter, Routes, Route } from 'react-router-dom'; import "bootstrap/dist/css/bootstrap.min.css"; import Navbar from "./components/navbar.component.js"; import PortfolioList from "./components/portfolio-list.component"; import EditPortfolio from "./components/edit-portfolio.component"; import CreatePortfolio from "./components/create-portfolio.component"; import CreateUser from "./components/create-user.component"; function App() { return ( <Routes> <Navbar /> <br/> <Route path="/" exact component={PortfolioList} /> <Route path="/edit/:id" exact component={EditPortfolio} /> <Route path="/create" exact component={CreatePortfolio} /> <Route path="/user" exact component={CreateUser} /> </Routes> ); } export default App;El siguiente es el 'error' que estoy generando en tiempo de ejecución:
Error: [Navbar] no es un componente de 'Ruta'. Todos los componentes secundarios de 'Rutas' deben ser una 'Ruta' o 'React.Fragment'
Solo los componentes Route y React.Fragment s pueden ser elementos secundarios del componente Routes , y viceversa. Mueva los componentes que no son de Route fuera de Routes . La API del componente Route también cambió en la versión 6, ya no hay accesorios de render y component , los componentes enrutados se pasan al accesorio de element como JSX, y las rutas ahora siempre coinciden exactamente, por lo que ya no hay el accesorio exact también.
function App() { return ( <> <Navbar /> <br/> <Routes> <Route path="/" element={<PortfolioList />} /> <Route path="/edit/:id" element={<EditPortfolio />} /> <Route path="/create" element={<CreatePortfolio />} /> <Route path="/user" element={<CreateUser />} /> </Routes> </> ); }puede usar la etiqueta "BrowserRouter" seguida de la etiqueta "Switch" y luego puede usar la etiqueta "Route" para especificar la ruta de cada componente
puede usar la etiqueta "BrowserRouter" seguida de la etiqueta "Switch" y luego puede usar la etiqueta "Route" para especificar la ruta de cada componente.
return ( <> <BrowserRouter> <Switch> <Route path="/" exact component={DashBoard} /> <Route path="/specialistes" exact component={Specialistes} /> <Route path="/findgarages" exact component={FindGarage} /> <Route path="/garages" exact component={Garages} /> </Switch> </BrowserRouter> </> )````