En React-Router-Dom V6 Preview tengo problemas para pasar los parámetros a un componente. Aquí está el archivo index.js con todas las rutas.
<BaseLayout> <Routes> <Route path = "/" element = {<App />} /> <Route path = "/add-book" element = {<AddNewBook />} /> <Route path = "/name" element = {<Name />} /> <Route path = "/books/:id" element = {<BookDetail />} /> </Routes> </BaseLayout>El problema es que cuando voy a BookDetail no puedo acceder a los parámetros usando
this.props.history.match.params.id class BookDetail extends Component { constructor(props) { super(props) } componentDidMount() { console.log(this.props) // this.props is empty object } render() { return ( <h1>BookDetail</h1> ) } } Even this.props is an empty object.Y NO para este proyecto no puedo usar ganchos.
ACTUALIZACIÓN (SOLUCIÓN):
import React, { Component } from 'react' import { useLocation, useNavigate, useParams } from 'react-router-dom' class BookDetail extends Component { constructor(props) { super(props) } componentDidMount() { // this.props is always empty object console.log(this.props.params.id) } render() { return ( <h1>BookDetail</h1> ) } } const withRouter = (Component) => (props) => { const history = useNavigate(); const location = useLocation(); const params = useParams(); return <Component params = {params} history={history} location={location} {...props} />; }; export default withRouter(BookDetail)En este caso, deberá crear un componente contenedor para pasar esas propiedades:
const WithRouter = (Component) => (props) => { const history = useNavigate(); const location = useLocation(); return <Component history={history} location={location} {...props} />; };luego en su archivo BookDetails:
export default WithRouter(BookDetails);Está utilizando react-router v6 cuyo historial ya no funciona, el historial se reemplazó con useNavigate. En el componente de función, esto puede ser muy fácil porque debe reemplazar useHistory() con useNavigate, pero si prefiere usar el componente de clase, consulte esta solución: Cómo usar react-router-dom v6 navegar en el componente de clase