0

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> &nbsp;&nbsp;
              <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.

6
  • Por favor comparte todo el código de los componentes involucrados. Te recomiendo que hagas es recorrido de bienvenida y leas Cómo preguntar y ejemplo mínimo verificable Commented el 11 ago. 2022 a las 19:07
  • Si el problema está en DetallesPelicula... porque no compartes ese código también?
    – Pipe
    Commented el 11 ago. 2022 a las 19:09
  • Cuando pongo el codigo se riega todo, no se por que :( Commented el 11 ago. 2022 a las 21:03
  • Que dificil se me hace poner el codigo y el texto, me da siempre errores :( Commented el 11 ago. 2022 a las 21:42
  • Hola Luis, ¿Qué versión de react router utilizas? ¿Te funcionan las otras rutas? Nunca lo he utilizado con la función render, pero veo que también tienes un intento con el prop element, según la documentación, de la version 6, tu ruta debería verse como: <Route path="/details/:Id" element={<DetallesPelicula />} /> y dentro de detalles pelicula, deberías importar useParams de react-router-dom y de ahi obtener tu valor utilizando let params = useParams(); esto obtendrá los parametros de la URL, y luego puede acceder al id usando params.Id. Commented el 11 ago. 2022 a las 22:44

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.