con reactjs estoy gestionando peliculas. Logro mostrar las peliculas en una vistaPerdon, pero tengo problemassoy nuevo y nunca habia escrito aqui :)
Recuerden mi problema: La ruta para DetallesPelicula no envia el Id al mostrar sus detalles en otra vistacomponente DetallesPelicula. IMPORTANTEParece ser que esta sintaxis que tome de otro lado, uso componentesno trabaja para esta versi'on de clasereact-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);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>
)
}
}