Perdon, soy nuevo y nunca habia escrito aqui :)
Recuerden mi problema: La ruta para DetallesPelicula no envia el Id al componente DetallesPelicula. Parece ser que esta sintaxis que tome de otro lado, no trabaja para esta versi'on de react-router-dom.
<Route exact path="/details/:id" render={props => {
var id = props.match.params.id;
return <DetallesPelicula id={id} />
}} />
de modo que el problema parece estar aqui,
var id = props.match.params.id;
//Router.js
import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import MenuPeliculas from './components/MenuPeliculas';
import Peliculas from './components/Peliculas';
import InsertarPelicula from './components/InsertarPelicula';
import DetallesPelicula from './components/DetallesPelicula';
import UpdatePelicula from './components/UpdatePelicula';
import DeletePelicula from './components/DeletePelicula';
export default class Router extends React.Component{
render() {
return (
<div>
<BrowserRouter>
<MenuPeliculas />
<Routes>
<Route exact path="/" element={<Peliculas />} />
<Route exact path="/create" element={<InsertarPelicula />} />
{/* <Route exact path="/details/:id" element={<DetallesPelicula />} /> */}
<Route exact path="/details/:id" render={props => {
var id = props.match.params.id;
return <DetallesPelicula id={id} />
}} />
<Route exact path="/update/:id" render={props => {
var id = props.match.params.id;
return <UpdatePelicula id={id} />
}} />
<Route exact path="/delete/:id" render={props => {
var id = props.match.params.id;
return <DeletePelicula id={id} />
}} />
</Routes>
</BrowserRouter>
</div>
)
}
}
Peliculas.js
import React from 'react';
import axios from 'axios';
import Global from '../Global';
import { NavLink } from 'react-router-dom';
export default class Peliculas extends React.Component {
state = {
peliculas: []
, status: false
}
cargarPeliculas = () => {
var url = Global.urlpeliculas;
var request = "/peliculas";
axios.get(url + request).then(res => {
this.setState({
peliculas: res.data
, status: true
});
});
}
componentDidMount = () => {
this.cargarPeliculas();
}
render() {
return (
<div>
<h1 style={{display: 'flex', justifyContent:'center'}}>Película</h1>
<table className="table table-info">
<thead className="thead-dark">
<tr>
<th>Id Película</th>
<th>Nombre</th>
<th>Director</th>
<th>Clasificación</th>
<th>Detalles</th>
<th>Modificar</th>
<th>Eliminar</th>
</tr>
</thead>
<tbody>
{this.state.status === true &&
(
this.state.peliculas.map((peli, i) => {
return (
<tr key={i}>
<td>{peli.id}</td>
<td style={{ fontWeight: "bold" }}>{peli.nombre}</td>
<td>{peli.director}</td>
<td>{peli.clasificacion}</td>
<td>
<NavLink to={`/details/${peli.id}`} >Detalles</NavLink>
{/* <NavLink to={"/details/" + peli.id}>Detalles</NavLink> */}
</td>
<td>
<NavLink to={"/update/" + peli.id}>Modificar</NavLink>
</td>
<td>
<NavLink to={"/delete/" + peli.id}>Eliminar</NavLink>
</td>
</tr>
);
})
)}
</tbody>
</table>
</div>
)
}
}
DetallesPelicula.js
import React from 'react';
import axios from 'axios';
import Global from '../Global';
import { NavLink } from 'react-router-dom';
export default class DetallesPelicula extends React.Component {
state = {
pelicula: {}
, status: false
}
mostrarPelicula = () => {
var request = "/peliculas/" + this.props.id;
var url = Global.urlpeliculas + request;
console.log("url: " + url);
axios.get(url).then(res => {
this.setState({
pelicula: res.data[0]
, status: true
});
});
}
componentDidMount = () => {
console.log("id en DidMount: " + this.props.id);
this.mostrarPelicula();
}
render() {
console.log("id en render(): " + this.props.id);
return (
<div>
<br /><br />
<h1><u>Detalles de la película número: {this.props.id}</u></h1>
{this.state.status === true &&
(
<React.Fragment>
<br />
<NavLink to="/" className="btn btn-sm btn-dark">Listado</NavLink>
<br /><br />
<h3>Nombre: <span style={{ color: "green", fontWeight: "bold" }}>{this.state.pelicula.nombre}</span></h3>
<h3>Director: <span style={{ color: "green", fontWeight: "bold" }}>{this.state.pelicula.director}</span></h3>
<h3>Clasificación: <span style={{ color: "green", fontWeight: "bold" }}>{this.state.pelicula.clasificacion}</span></h3>
<NavLink to={"/update/" + this.state.pelicula.id} className="btn btn-primary">Modificar</NavLink>
<NavLink to={"/delete/" + this.state.pelicula.id} className="btn btn-danger">Borrar</NavLink>
</React.Fragment>
)}
</div>
)
}
}
Sucede que en el componente DetallesPelicula no logro capturar el Id, pues es "undefined". Todo parece indicar que el problema esta en props.match.params.id. he probado de otras maneras pero no lo logro.
He investigado pero no logro capturar el Id para pasarlo en la propia ruta.
Saludos.