Estoy comenzando un nuevo proyecto react-typescript y estoy usando react-router-dom para administrar el enrutamiento, pero me encuentro con el siguiente error en el contador del navegador:
Matched leaf route at location "/restaurant" does not have an element. This means it will render an <Outlet /> with a null value by default resulting in an "empty" page
Aquí está el código:
<BrowserRouter> <SiteNav hasItemInCart={false} numberOfItemsInCart={0}/> <Routes> <Route path="/home" children={Home} /> <Route path="/restaurant" children={Restaurant} /> <Route path="/hostel" children={Hostel} /> </Routes> </BrowserRouter> export default class Home extends Component<any, any> { render() { return ( <> <div> Home </div> </> ) } } class Hostel extends React.Component<any, any> { render() { return ( <div className="Hostal"> <body>Hostal</body> </div> ); } } Según tengo entendido, se supone que debo devolver un JSX.element pero mecanografiado arroja errores cuando intento usarlo. ¿Por qué no puedo usar React.Component ? ¿Cómo debo hacer esto en su lugar?
Creo que está mezclando los tipos React y la API del componente Route . En react-router-dom@6 ahora solo hay un accesorio de element ( sin accesorios de función de component o render children child) que toma un React.ReactNode , .aka cualquier JSX válido .
declare function Route( props: RouteProps ): React.ReactElement | null; interface RouteProps { caseSensitive?: boolean; children?: React.ReactNode; element?: React.ReactNode | null; index?: boolean; path?: string; }
Está pasando sus componentes enrutados a la Route usando la sintaxis/API del componente de Route RRDv5. Convierte tus rutas para usar el element prop.
Ejemplo:
<BrowserRouter> <SiteNav hasItemInCart={false} numberOfItemsInCart={0} /> <Routes> <Route path="/home" element={<Home />} /> <Route path="/restaurant" element={<Restaurant />} /> <Route path="/hostel" element={<Hostel />} /> </Routes> </BrowserRouter>JSX.Element es el tipo de JSX ya renderizado . Por ejemplo:
const a: JSX.Element = <>asd</> const b: JSX.Element = <SomeComponent /> React.Component es el tipo de componente que sabe cómo producir un JSX.Element cuando se procesa con accesorios específicos.
function A() { return <>Testing</> } // A is a component const a: JSX.Element = <A /> Por lo general, children en React son un JSX.Element que pasas como el contenido de una etiqueta.
<A> <div>children go here</div> </A> O puede usar el accesorio para children explícitamente:
<A children={<div>children go here</div>} />Entonces, en su caso, está pasando un componente a un accesorio que espera contenido renderizado.
Si desea pasar contenido renderizado, desea:
<Route path="/home" children={<Home />} />O:
<Route path="/home"><Home/></Route> Aunque la versión moderna del enrutador de reacción recomienda pasar JSX al element prop. Así que usa esto a menos que estés en una versión anterior.
<Route path="/home" element={<Home />} />¿Qué versión de react-router-dom está en su package.json ? Esto podría ser un problema de versiones, en react-router-dom v6 todas las rutas están emparejadas así
[props.path]: [props.element]Eso significa, por ejemplo, para representar un "hey" en una ruta "/"
<Route path="/" element={<div>Hey!</div>} /> En su caso, tendría que invocar para los restaurants su componente <Restaurants />
<Route path="/" element={<Restaurants />} />