<Route path="chats/:id" element={<Chat />} /> import React from "react"; export default class Chat extends React.Component { render() { return ( <> {this.props.match.params.id} </> ) } }Si uso esto, solo obtengo un sitio en blanco y el siguiente error:
Chat.js:6 Uncaught TypeError: Cannot read properties of undefined (reading 'params') at Chat.render (Chat.js:6:1) at finishClassComponent (react-dom.development.js:20487:1) at updateClassComponent (react-dom.development.js:20433:1) at beginWork (react-dom.development.js:22366:1) at HTMLUnknownElement.callCallback (react-dom.development.js:4157:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:4206:1) at invokeGuardedCallback (react-dom.development.js:4270:1) at beginWork$1 (react-dom.development.js:27243:1) at performUnitOfWork (react-dom.development.js:26392:1) at workLoopSync (react-dom.development.js:26303:1)¿Cómo puedo hacer que esto funcione? Ningún tutorial o googlear funcionó.
( yo uso react-router-dom v6 )
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
importar withRouter desde el enrutador de reacción
import { withRouter } from "react-router";envuelva su componente de clase con withRouter
import React from "react"; class Chat extends React.Component { render() { return ( <> {this.props.match.params.id} </> ) } } export default withRouter(Chat)para reaccionar enrutador v6 use un envoltorio personalizado
import { useLocation, useNavigate, useParams, } from "react-router-dom"; function withRouter(Component) { function ComponentWithRouterProp(props) { let location = useLocation(); let navigate = useNavigate(); let params = useParams(); return ( <Component {...props} router={{ location, navigate, params }} /> ); } return ComponentWithRouterProp; }reaccionar enrutador v6 con enrutador
Recomiendo usar el useParams para este caso de uso. Sin embargo, tendrías que usar un componente funcional. Terminaría luciendo así:
import React from 'react'; import { useParams } from 'react-router'; export default function Chat() { const params= useParams() return <>{params.id}</> }react-router@v6 docs proporciona un contenedor
// withRouter.js import { useLocation, useNavigate, useParams, } from "react-router-dom"; function withRouter(Component) { function ComponentWithRouterProp(props) { let location = useLocation(); let navigate = useNavigate(); let params = useParams(); return ( <Component {...props} router={{ location, navigate, params }} /> ); } return ComponentWithRouterProp; } export default withRouterEntonces solo úsalo
import React from "react"; import withRouter from './withRouter'; export default withRouter(class Chat extends React.Component { render() { return ( <> {this.props.router.params.id} </> ) } })