Estoy tratando de hacer que el enrutamiento funcione correctamente, pero cada vez que hago clic en el componente de mi barra de navegación, no va correctamente al componente que se supone que debe representar la ruta.
No hay errores indicados por React. Simplemente súper atascado en este momento.
import React from 'react'; import Navbar from './components/Navbar'; import Home from './components/Home.js'; import BlankPage from './components/BlankPage'; import {BrowserRouter as Router, Routes, Route} from 'react-router-dom'; function App() { return ( <> <Router> <Navbar/> <Routes> <Route path="/" component={Home}/> <Route path="/blankpage" component={BlankPage}/> </Routes> </Router> </> ); } export default App;En react-router-dom v6 , no hay un parámetro de component en Route , debe pasar los componentes de su ruta como elements de Route , con la representación del componente en lugar de simplemente pasar la referencia
Cambiar de esto
<Route path="/" component={Home}/> <Route path="/blankpage" component={BlankPage}/>A esto de abajo
<Route path="/" element={<Home />}/> <Route path="/blankpage" element={<BlankPage />}/>Referencia react-router-dom v6 Documentos oficiales
Ruta: un objeto o elemento de ruta normalmente con una forma de
{ path,element }o<Route path element>. El camino es un patrón de camino. Cuando el patrón de ruta coincida con la URL actual, se representará el elemento.