Estoy usando react-router-dom versión 6.0.2 aquí y los accesorios "Renderizar" no funcionan, cada vez que llego a la URL mencionada en la etiqueta Ruta de mi ruta, me sigue arrojando este error: "Hoja coincidente La ruta en la ubicación "/addRecipe" no tiene un elemento. Esto significa que generará un valor nulo de forma predeterminada, lo que resultará en una página "vacía". ¿Puede alguien ayudarme con este problema?
import './App.css'; import Home from './components/Home'; import AddRecipe from './components/AddRecipe'; import items from './data'; import React, { useState } from 'react'; import {BrowserRouter as Router, Routes, Route} from 'react-router-dom'; const App = () => { const [itemsList, setItemsList] = useState(items) const addRecipe = (recipeToAdd) => { setItemsList(itemsList.concat([recipeToAdd])); } const removeItem = (itemToRemove) => { setItemsList(itemsList.filter(a => a!== itemToRemove)) } return ( <Router> <Routes> <Route path="/addRecipe" render={ ({history}) => { return (<AddRecipe onAddRecipe={(newRecipe) => { addRecipe(newRecipe); history.push('/'); } } />); } } /> </Routes> </Router> ); } export default App;En la versión 6 de react-router-dom, debe usar el elemento prop para esto.
Le sugiero que lea su documento sobre la actualización desde la versión 5 donde explican los cambios.
Para su problema, debe escribir algo como esto:
<Route path="/addRecipe" element={ <AddRecipe onAddRecipe={(newRecipe) => { addRecipe(newRecipe); history.push('/'); } /> } />La API del componente Route cambió significativamente de la versión 5 a la versión 6, en lugar de component y accesorios de render , hay un accesorio de element singular que se pasa un literal JSX en lugar de una referencia a un componente React ( a través de component ) o una función ( a través de render ) .
Ya no hay accesorios de ruta ( history , location y match ) y solo se puede acceder a ellos a través de los ganchos de React. Además de esto, RRDv6 ya no muestra el objeto de history directamente, sino que lo abstrae detrás de una función de navigate , accesible a través del gancho useNavigate . Si el componente AddRecipe es un componente de función, solo debe acceder a navigate directamente desde el gancho. Si no puede hacerlo, la solución es crear un componente de contenedor que pueda y luego representar el componente AddRecipe con la devolución de llamada onAddRecipe corregida.
Ejemplo:
const AddRecipeWrapper = ({ addRecipe }) => { const navigate = useNavigate(); return ( <AddRecipe onAddRecipe={(newRecipe) => { addRecipe(newRecipe); navigate('/'); }} /> ); };...
const App = () => { const [itemsList, setItemsList] = useState(items); const addRecipe = (recipeToAdd) => { setItemsList(itemsList.concat([recipeToAdd])); }; const removeItem = (itemToRemove) => { setItemsList(itemsList.filter(a => a !== itemToRemove)) }; return ( <Router> <Routes> <Route path="/addRecipe" element={<AddRecipeWrapper addRecipe={addRecipe} />} /> </Routes> </Router> ); };