Skip to main content
se añadieron 6044 caracteres en el cuerpo
Origen Enlace

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> &nbsp;&nbsp;
              <NavLink to={"/delete/" + this.state.pelicula.id} className="btn btn-danger">Borrar</NavLink>
            </React.Fragment>
          )}
      </div>
    )
  }
}

con reactjs estoy gestionando peliculas. Logro mostrar las peliculas en una vista, pero tengo problemas al mostrar sus detalles en otra vista. IMPORTANTE, uso componentes de clase.

      <Routes>
        <Route exact path="/" element={<Peliculas />} />
        <Route exact path="/create" element={<InsertarPelicula />} />
        <Route exact path="/details/:id" render={props => {
          var id = props.match.params.id);
          return <DetallesPelicula id={id} />
        }} />
      </Routes>

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>
    )
  }
}
Origen Enlace

pasar id como parametro de ruta en componentes de clases

con reactjs estoy gestionando peliculas. Logro mostrar las peliculas en una vista, pero tengo problemas al mostrar sus detalles en otra vista. IMPORTANTE, uso componentes de clase.

      <Routes>
        <Route exact path="/" element={<Peliculas />} />
        <Route exact path="/create" element={<InsertarPelicula />} />
        <Route exact path="/details/:id" render={props => {
          var id = props.match.params.id);
          return <DetallesPelicula id={id} />
        }} />
      </Routes>

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.