Parece que no puedo representar múltiples elementos de ruta en un solo elemento de rutas. Me gustaría tener varios elementos de ruta en un solo elemento de rutas, ya que ambos se actualizan dinámicamente. ¿La sintaxis/estilo antiguo no funciona?
Ejemplo de código:
import React from 'react'; import './App.css'; import Header from './Header'; import Home from './Home'; import {BrowserRouter as Router, Route, Routes} from 'react-router-dom'; function App() { return ( // use BEM naming convention <Router> <div className="app"> <Routes> {/* This one works */} {/* <Route path="/" element={<><Header /><Home /></>} /> */} {/* But this doesnt: */} <Route path="/" element={<Header />} /> <Route path="/" element={<Home />} /> </Routes> </div> </Router> ); } export default App;Solo debe haber una Route por ruta que desee hacer coincidir. En react-router-dom@6 todas las rutas se emparejan exclusivamente, el componente Routes tiene un propósito similar y es el sucesor espiritual del componente RRDv5 Switch .
Si está tratando de representar lógica/componentes de IU comunes, entonces la forma recomendada es usar lo que se denomina Rutas de diseño que representa la lógica/IU común y un componente de Outlet para que los componentes de Route anidados representen su element .
Si desea representar un componente de Header en rutas específicas, cree un componente de diseño que represente el Header y la Outlet y envuelva las rutas que desea representar con Header .
Ejemplo:
import { Outlet } from 'react-router-dom'; import Header from '../path/to/Header'; const HeaderLayout = () => ( <> <Header /> <Outlet /> // <-- nested routes render content here </> ); export default HeaderLayout;...
import React from 'react'; import './App.css'; import HeaderLayout from './HeaderLayout'; import Home from './Home'; import {BrowserRouter as Router, Route, Routes} from 'react-router-dom'; function App() { return ( // use BEM naming convention <Router> <div className="app"> <Routes> <Route element={<HeaderLayout />}> <Route path="/" element={<Home />} /> // <-- nested route ... other routes with Header </Route> ... other routes w/o Header </Routes> </div> </Router> ); }