Niño
import React from "react"; import { Link } from "react-router-dom"; import "../pages/All.css"; const MovieList = (props) => { return( <> {props.movies.map((movie, index) => ( <div className="ro"> <img src={movie.Poster} alt={movie.Title} /> <br /> <br /> <label>{movie.Title}</label> <br /> <p>{movie.Type} {movie.Year}</p> <br /> <br /> <div className="overlay"> <li><Link to = "/play" class="popup-video btn">Watch</Link></li> <li><Link to ="movie-details.html" class="btn">Download</Link></li> </div> </div> ))} </> ); }; export default MovieList; import React from "react"; import ReactPlayer from "react-player"; function Play(movie){ return( <div> <ReactPlayer width="100%" height="750px" controls url ={"http://www.youtube.com/"+movie.Title} /> </div> ); } export default Play;estoy tratando de pasar {movie.Title} a la URL de control en el componente principal
Espero que lo que quieras preguntar sea cómo pasar parámetros.
const MainNavigation = ()=> ( <Routes> <Route path="/" element={<VideoList />} /> <Route path="/play:id" element={<Play />} /> </Routes> ) const VideoList = ()=> ( <Link to={"/play/" + movie.title}>{movie.title}</Link> ) const Play = ()=> { const {id} = useParams(); return ( <VideoComponent url={"https://example.com/" + id} /> ) }Para obtener más información, lea los documentos oficiales. https://reactrouter.com/docs/en/v6/hooks/use-params