Cada vez que ejecuto mi código recibo los siguientes errores en mi aplicación web:
Error:
useHref() solo se puede usar en el contexto de un componente<Router>.
Error: [BrowserRouter] no es un componente
<Route>. Todos los componentes secundarios de<Routes>deben ser<Route>o<React.Fragment>
Estoy usando "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.3.0".
Aplicación.js
import React from "react"; import { BrowserRouter as Route, Routes } from "react-router-dom"; import "bootstrap/dist/css/bootstrap.min.css" import Navbar from "./components/navbar.component"; import ExercisesList from "./components/exercises-list.component"; import EditExercise from "./components/edit-exercise.component"; import CreateExercise from "./components/create-exercise.component"; import CreateUser from "./components/create-user.component"; function App() { return ( <div className="container"> <Navbar /> <Routes> <Route path="/" exact component={ExercisesList} /> <Route path="/edit/:id" component={EditExercise} /> <Route path="/create" component={CreateExercise} /> <Route path="/user" component={CreateUser} /> </Routes> </div> ); } export default App;Ya existe una Route de función incorporada en react-router-dom . Por lo tanto, es revelador que no puede llamar a BrowserRouter como Route . Solo tienes que hacer lo siguiente,
import React from "react"; import {BrowserRouter as Router, Routes, Route} from "react-router-dom"; import "bootstrap/dist/css/bootstrap.min.css" import Navbar from "./components/navbar.component"; import ExercisesList from "./components/exercises-list.component"; import EditExercise from "./components/edit-exercise.component"; import CreateExercise from "./components/create-exercise.component"; import CreateUser from "./components/create-user.component"; function App() { return ( <div className="container"> <Router> <Navbar /> <Routes> <Route path="/" exact component={ExercisesList} /> <Route path="/edit/:id" component={EditExercise} /> <Route path="/create" component={CreateExercise} /> <Route path="/user" component={CreateUser} /> </Routes> <Router> </div> ); } export default App; Si necesita una muy buena idea sobre la configuración de react-router-dom . Lea https://medium.com/@sujith1396/a-basic-implementation-on-react-router-dom-v6-e9ff3b4e0529
Está utilizando BrowserRouter incorrectamente. Dentro del componente BrowserRouter puede poner sus componentes "estáticos" (según la respuesta de Sujith Sandeep):
<Router> <Navbar /> // this is a static component, it is shown always ... </Router> Y luego coloque el componente Routes dentro del mismo BrowserRouter , cuyos elementos secundarios se "intercambian" en función de la URL de su navegador:
<Routes> // this component renders only one of its children based on URL <Route path="/" exact component={ExercisesList} /> <Route path="/edit/:id" component={EditExercise} /> <Route path="/create" component={CreateExercise} /> <Route path="/user" component={CreateUser} /> </Routes> Entonces, en última instancia, lo que se perdió fue el componente BrowserRouter que maneja todos los intercambios de componentes.
Ha importado el BrowserRouter como una Route y es probable que no tenga ningún componente de enrutador que envuelva la App /UI y proporcione un contexto de enrutamiento. La API del componente Route también cambió, ya no están los accesorios de función de component y render e children , todos reemplazados por un accesorio de un solo element que toma un ReactNode , también conocido como JSX.
Importe el BrowserRouter correctamente y renderice los componentes en él. Renderice los componentes enrutados en la propiedad del element del componente de Route como JSX.
Ejemplo:
... import { BrowserRouter as Routes, Routes, Route } from "react-router-dom"; ... function App() { return ( <Router> <div className="container"> <Navbar /> <Routes> <Route path="/" element={<ExercisesList />} /> <Route path="/edit/:id" element={<EditExercise />} /> <Route path="/create" element={<CreateExercise />} /> <Route path="/user" element={<CreateUser />} /> </Routes> </div> </Router> ); }