Tengo problemas con el enrutamiento en react-router-dom v6. Mi código es el siguiente:
import './App.css'; import Header from './Header'; import Home from './Home'; import { BrowserRouter as Router, Routes, Link } from "react-router-dom"; function App() { return ( //BEM <Router> <div className="app"> <Routes> <Route path="/" element={[<Header />, <Home />]} /> </Routes> </div> </Router> ); } export default App;No se renderiza nada. Por favor ayuda.
Debería estar dando un solo componente a la propiedad del element . Suponiendo que desea Header en la parte superior de cada ruta, intente con esto:
import './App.css'; import Header from './Header'; import Home from './Home'; import { BrowserRouter as Router, Routes, Link } from "react-router-dom"; function App() { return ( //BEM <Router> <div className="app"> <Header /> <Routes> <Route path="/" element={Home} /> </Routes> </div> </Router> ); } export default App; Si desea tener Header solo en la ruta / , una forma más limpia es colocarlo dentro de Home . De lo contrario, podrías hacerlo así:
import './App.css'; import Header from './Header'; import Home from './Home'; import { BrowserRouter as Router, Routes, Link } from "react-router-dom"; function App() { return ( //BEM <Router> <div className="app"> <Routes> <Route path="/" element={()=><><Header/><Home/></>} /> </Routes> </div> </Router> ); } export default App;Intenta envolver múltiples elementos en Fragment
<Route path="/" element={<><Header/><Home/></>}/>¿Has probado a envolverlos en fragmentos?
<Route path="/" element={<><Header/><Home/></>}/>