Estoy tratando de cargar una vista de detalles basada en una ruta react-router-dom que debería capturar el parámetro de URL (id) y usarlo para completar aún más el componente.
Mi ruta se ve como /task/:id y mi componente se carga bien, hasta que trato de tomar el :id de la URL así:
import React from "react"; import { useParams } from "react-router-dom"; class TaskDetail extends React.Component { componentDidMount() { let { id } = useParams(); this.fetchData(id); } fetchData = id => { // ... }; render() { return <div>Yo</div>; } } export default TaskDetail;Esto desencadena el siguiente error y no estoy seguro de dónde implementar correctamente useParams().
Error: Invalid hook call. Hooks can only be called inside of the body of a function component.Los documentos solo muestran ejemplos basados en componentes funcionales, no basados en clases.
Versión <= 5:
Puede usar withRouter para lograr esto. Simplemente envuelva su componente clasificado exportado dentro de withRouter y luego puede usar this.props.match.params.id para obtener los parámetros en lugar de usar useParams() . También puede obtener cualquier información de location , match o history utilizando withRouter . Todos se pasan bajo this.props
Usando tu ejemplo, se vería así:
import React from "react"; import { withRouter } from "react-router"; class TaskDetail extends React.Component { componentDidMount() { const id = this.props.match.params.id; this.fetchData(id); } fetchData = id => { // ... }; render() { return <div>Yo</div>; } } export default withRouter(TaskDetail);¡Simple como eso!
Los parámetros se transmiten a través de accesorios en el objeto de coincidencia.
props.match.params.yourParamsfuente: https://redux.js.org/advanced/usage-with-react-router
Aquí hay un ejemplo de los documentos que destruyen los accesorios en los argumentos.
const App = ({ match: { params } }) => { return ( <div> <AddTodo /> <VisibleTodoList filter={params.filter || 'SHOW_ALL'} /> <Footer /> </div> ) }Dado que los ganchos no funcionan con componentes basados en clases, puede envolverlos en una función y pasar las propiedades:
class TaskDetail extends React.Component { componentDidMount() { const { id } = this.props.params; // ... } } export default (props) => ( <TaskDetail {...props} params={useParams()} /> ); Pero, como dijo @michael-mayo, espero que esto sea lo que withRouter ya está realizando.