Soy nuevo en el desarrollo de reacciones y actualmente estoy en un tutorial sobre rutas de reacción que usa V5 react-router-dom . Me resulta difícil representar una función en mis rutas ahora que estoy usando v6 react-router-dom . Necesito ayuda como otras soluciones. Veo consejos en línea. Utilizo ganchos con los que aún no estoy familiarizado.

 import React, { Component } from 'react'; import { Route, Routes } from "react-router-dom"; import DogList from './DogList'; import DogDetails from './DogDetails'; import whiskey from './images/whiskey.jpg'; import tubby from "./images/tubby.jpg"; import hazel from "./images/hazel.jpg"; import './App.css'; class App extends Component { static defaultProps = { dogs: [ { name: "Whiskey", age: 5, src: whiskey, facts: [ "Whiskey loves eating popcorn.", "Whiskey is a terrible guard dog.", "Whiskey wants to cuddle with you!" ] }, { name: "Hazel", age: 3, src: hazel, facts: [ "Hazel has soooo much energy!", "Hazel is highly intelligent.", "Hazel loves people more than dogs." ] }, { name: "Tubby", age: 4, src: tubby, facts: [ "Tubby is not the brightest dog", "Tubby does not like walks or exercise.", "Tubby loves eating food." ] } ] }; render() {

¿Cómo renderizo la función getDog en mi ruta usando el v6 react-router-dom.

 const getDog = props => { let name = props.match.params.name; let currentDog = this.props.dogs.find( dog => dog.name.toLowerCase() === name.toLowerCase() ); return <DogDetails {...props} dog={currentDog}/> } return (

Recibo este error de que "/dogs/Hazel" no tiene un elemento ". Luego, cuando cambio el renderizado a elemento , aparece un error diferente que dice que las funciones no son válidas como un elemento secundario de React .

 <Routes> <Route exact path='/dogs' element={<DogList dogs={this.props.dogs} />} /> <Route exact path='/dogs/:name' render={getDog}/> </Routes> ); } } export default App;