Estoy tratando de pasar una variable de ruta, ID de usuario, como apoyo a un componente de React representado por React Router:
Perfil.js
export const Profile = (props) => { //array of compatible users fetched for a user. const [userProfileInformation, setUserProfileInformation] = useState([]); const [isLoading, setLoading] = useState(true); useEffect(() => { getUserProfileInformation().then(() => { setLoading(false); }); }, []); const getUserProfileInformation = async () => { //Currently hardcoded value until authorisation implemented. const userId = this.props.match.params.id; const response = await UserService.getUserProfileInformation(userId) .then(response => response.json()) .then(data => { setUserProfileInformation(data); }); } if (isLoading) { return ( <div id="loading"> <h2>Loading...</h2> </div> ) } return ( <div> <div className="profileCard"> <h2>{userProfileInformation.email}</h2> </div> </div> )}
El error ocurre debido al código 'userId = props.match.params.id'.
Aplicación.js:
const root = ReactDOM.createRoot( document.getElementById("root"));
root.render( <BrowserRouter> <Routes> <Route path="/" element={<App />} /> <Route path="/profile/:userId" element={<Profile />} /> </Routes> </BrowserRouter> );Tablero.js:
export const Dashboard = () => { return( <div> <h2>Dashboard</h2> <Button color="link"><Link to={`/profile/1`}>Profile</Link></Button> </div> );}
Lo anterior usa temporalmente un valor codificado para el enlace, 1.
Editar:
Probado con const userId = props.match.params.id; y const userId = this.props.match.params.id y const userId = props.match.params.userId; y const userId = this.props.match.params.userId;
Todos dan el mismo resultado que antes.
Gracias
La versión de react-router-dom que está utilizando es v6. En esta versión (que tiene muchos cambios importantes a los que debe estar atento), no se puede acceder al objeto params ya que las propiedades de route props no se pasan al element /componente.
Para acceder al userId de usuario, ahora necesita usar el useParams .
import {useParams} from 'react-router-dom'const userId = props.match.params.userId , use const { userId } = useParams() y luego utilícelo como lo hizo antes.Si esta respuesta te ayuda, por favor acéptala. ¡Gracias!