Arreglando la funcionalidad del player

Me siento como tonto,en este video vine a encontrar la solución a una pregunta que dejé en el video anterior. jajaja

En las rutas.
<Route exact path="/player/:id" component={Player} />

Recibe el id
const { id } = props.match.params;

Lo que hicimos fue enviar a nuestro player un id que se obtiene del render que se hace de los elementos para cada uno de los items del carousel y de esta manera transmitimos el id a nuestra url y ahi capturamos este valor para saber cual es el video que corresponde a ese id y poder presentarlo en el reproductor.
Despues importamos los estilos.

import '../assets/styles/components/Player.scss';

Quitamos el typo que teniamos en la className 

            <div className="Player-back">

y en el boton agregamos la funcion que nos regresará a la pagina principal, esta funcion esta encapsulado en el browser router.

               <button type="button" onClick={() => props.history.goBack()}>

Despues debemos reparar el compilado porque no lo lee por defecto el bundle.js
Por lo tanto en webpack en output agregamos esta  confiuguracion que nos dice que lo lea en el publicPath
    publicPath: '/',
despues en el componente player debemos obtener el id que recibimos por parametros

    const { id } = props.match.params;

Esto lo hace Router en el momento que nosotors generamos la ruta player:id y asi hacer un match con los parametros que recibimos y de esta forma buscamos el video que corresponde a ese id.```

use el doble destrusturing y me quedó así

  const {history,  match: {params: {id}}} = props;

🦄 Acá el código trabajado hasta el momento: https://github.com/AndresCampuzano/React-Router-and-Redux/commits/master

Si el eslint les marca advertencia al obtener el id de la ruta pueden hacer esto:

const { match: { params: { id } } } = props;

19 de Enero 2022 react-router-dom

Debido a los cambios de modulo ahora hay que utilizar lo siguiente para volver atras

import { useNavigate } from "react-router-dom";

const navigate = useNavigate()

onClick={() => navigate('../')}

Yo solucioné lo del botón de regresar encapsulandolo en un <Link>:

Yo ya habia importado Link y react-router-dom para hacer el botón de regresar jajajaja Buen truco el de props.history.goBack()

Recomendacion ver el curso de WebPack

Encontré una manera distinta de obtener el parámetro id de la url:

import { useParams } from 'react-router-dom';
const { id } = useParams();

Hola, para aquellos que están haciendo el curso en 2022, no usen Link en vez de go back; en uno de los comentarios de esta clase dicen que es una mala práctica. Encontré este vídeo con una solución muy simple para usar algo similar a goBack() https://www.youtube.com/watch?v=vwyInhbxGyg.
Pasos:

1. import { useNavigate } from “react-router-dom”;

2. Dentro de la constante Player, creamos:

   const navigate = useNavigate();

3. <button type=“button” onClick={() => navigate(-1)}>
   Regresar
   </button>

Soy el unico que le sucede esto?

buenas compañeros, yo me pregunto, porque al player no le pinta el header ni el footer… estoy algo perdido en ese tema 😦, alguien me podría explicar porque no y como se podria hacer que pinten…

Este curso me ha parecido genial, he entendido fácilmente redux, ya que vengo del curso profesional de redux y no me quedaban algunas cosas claras.

al revisar los archivos del proyecto me doy cuenta que la parte del header cambio usando imports como classname y PropTypes

y no se ni en cual clase paso eso ._, falta un vídeo o algo ?

Muy interesante… Gracias!!

Estupendo, tengo un error voy a esperar hasta el final si de pronto se arregla a lo ultimo del curso

Es muy cierto, una pequeña configuración puede hacer la diferencia en un proyecto

mi github

https://github.com/ruben-xe

No entendi muy bien lo de publicPath

Alguien sabe como se arregla este problema? Cuando elimino un elemento de mi lista se eliminan todos.

A que exactamente deberia ponerle el key?

react.development.js:315 Warning: Each child in a list should have a unique “key” prop.

Check the render method of Home. See https://fb.me/react-warning-keys for more information.
in ConnectFunction (created by Home)
in Home (created by ConnectFunction)
in ConnectFunction (created by Context.Consumer)
in Route (created by App)
in Switch (created by App)
in div (created by Layout)
in Layout (created by App)
in Router (created by BrowserRouter)
in BrowserRouter (created by App)
in App
in Provider

Duré todo un día buscando la solución a este problema jajajaj 😦

Con las versiones mas recientes de react-router-dom podemos usar el hook useParams que nos ahorra la complicada destructuración de un objeto en otro, quedaria asi:

const { id } = useParams()

Por medio de las props podemos obtener el id del vídeo.

Regresamos a la pantalla anterior con esto en Plyer.jsx:

const Player = (props) => {
  const { id } = props.match.params; //*Esto nos lo manda router
  return (
    <button type='button' onClick={() => props.history.goBack()}>
      Regresar
    </button>
  );
};

export default Player;

Agregamos publicPath al output del archivo webpack.config.js:

output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'bundle.js',
  publicPath: '/',
}

Y reiniciamos el servidor.

Pueden hacer uso del hook useParams para acceder a los parametros de la url

import React from "react";
import { useHistory, useParams } from "react-router-dom";
import "../assets/styles/components/Player.scss";
const Player = (props) => {
  const history = useHistory();
  const { id } = useParams();
  console.log(id);
  return (
  );
};

export default Player;

mas ejemplos de hooks de react-router-dom

Codigo del player 😃

import React from 'react';
import '../assets/styles/components/Player.scss';

const Player = (props) =>{
    const { id } = props.match.params;
    return(
        <div className="Player">
            <video controls autoPlay>
                <source src="" type="video/mp4"/>
            </video>
            <div className="Player-back">
                <button type="button" onClick={() => props.history.goBack()}>
                    Regresar
                </button>
            </div>
        </div>
    );
};

export default Player

interesante como se obtienen las cosas desde props

Ha sido muy interesante este curso

Les comparto el archivo de Webpack que uso para lo que yo estoy haciendo:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/',
  },
  mode: 'development',
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  module: {
    rules: [
      {
        test: /\.js(x*)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
          },
        ],
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
          },
        ],
      },
      {
        test: /\.(s*)css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader',
        ],
      },
      {
        test: /\.(png|jp(e*)g|gif|svg)$/i,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },
    ],
  },
  devServer: {
    historyApiFallback: true,
    port: 8088,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
      filename: './index.html',
      title: 'Cassette',
    }),
    new MiniCssExtractPlugin({
      filename: './assets/[name].css',
    }),
  ],
};

n

a

Muchas gracias!