Json 将数据从组件传递到另一个页面，以便它可以引用ID并执行某些操作_Json_Reactjs_React Router_Jsx

Json 将数据从组件传递到另一个页面，以便它可以引用ID并执行某些操作

json reactjs

Json 将数据从组件传递到另一个页面，以便它可以引用ID并执行某些操作,json,reactjs,react-router,jsx,Json,Reactjs,React Router,Jsx,我有下面的代码，所以你们都可以看看。现在，当用户单击图像时，我在下面的组件中看到它，它会在浏览器中显示/watch/9，这很好，但是当我转到另一个页面时，我如何引用该数据（用户选择在同一JSON对象中播放视频的ID为9）？谢谢你的帮助，我将不胜感激 0: id: 9 title: "Stuff" description: "1. Some stuff" video_path: "stuff.com/videos/1/9/9.mp4" video_date: "some date" poster_

我有下面的代码，所以你们都可以看看。现在，当用户单击图像时，我在下面的组件中看到它，它会在浏览器中显示/watch/9，这很好，但是当我转到另一个页面时，我如何引用该数据（用户选择在同一JSON对象中播放视频的ID为9）？谢谢你的帮助，我将不胜感激

0:
id: 9
title: "Stuff"
description: "1. Some stuff"
video_path: "stuff.com/videos/1/9/9.mp4"
video_date: "some date"
poster_path: "stuff.com/Videos/1/9/9poster.jpg"
poster_date: "None"
user_id: 2
category: 1
deleted: 0
username: "SomeUser"

我有一个组件，它只构建带有视频海报和其他数据的卡片

import React from "react"
import "../styles/VideoCards.css"

export default function VideoData({ img, title, username, id }) {
    return (
        <div className="col-xl-3 col-lg-4 col-md-4 col-sm-6 p-3">
            <div className="card">
                <a className="img-hover" href={`/watch/${id}`}><img src={img} className="card-img-top rounded" alt="" /></a>
                <div className="card-body">
                    <a href="" className="link-hover"><h5 className="card-title">{title}</h5></a>
                    <a href="" className="link-hover"><p className="card-text font-weight-bold">{username}</p></a>
                </div>
            </div>
        </div>
    )
}

从“React”导入React
导入“./style/VideoCards.css”
导出默认函数VideoData（{img，title，username，id}）{
返回(
)
}

这个容器只获取数据并能够输出数据

import React, {useEffect, useState} from "react"
import {postVideos} from "../services/MyCuruApi"
import VideoData from "../components/VideoData"

export default function VideoContainer() {
    const [videoIds, setVideoIds] = useState([])

    useEffect(() => {
        postVideos().then(data => setVideoIds(data))
    }, [])
    console.log(videoIds)

    return videoIds.map(videoId => 
    <VideoData 
    img={videoId.poster_path}
    title={videoId.title}
    username={videoId.username}
    id={videoId.id}
    video={videoId.video_path}
    /> )
}

import React，{useffect，useState}来自“React”
从“./services/MyCuruApi”导入{postVideos}
从“./组件/视频数据”导入视频数据
导出默认函数VideoContainer（）{
const[videoIds，setVideoIds]=useState（[]）
useffect（（）=>{
postVideos（）。然后（数据=>setVideoID（数据））
}, [])
控制台日志（视频ID）
返回videoId.map（videoId=>
)
}

我将通过在路由中引入参数来获取ID

例如，在route中，我会这样写：

<Route exact path='/watch/:id/' render={(props) => (
    <VideoContainer{...props} />
 )} />

我将通过在路线中引入参数来获取ID

例如，在route中，我会这样写：

<Route exact path='/watch/:id/' render={(props) => (
    <VideoContainer{...props} />
 )} />

可以在URL的查询参数中传递id，

href={

/watch/${id}？id=${id}

并访问URL

窗口。location.href

，您可以使用URL对象解析url@Jem您想要url中的特定选定视频和导航组件中的数据吗？@harsh我将试一试。@瓦希德：是的，所以我有不同的视频——想想youtube——很多不同的视频，用户点击其中一个，数据通过他们选择的特定视频传递到另一个页面。ID为9的JSON对象引用视频，因为它是同一JSON的一部分。目标是他们点击任何视频，ID已经在JSON中，然后它进入另一个ID为So something.com/watch/9的页面，视频播放。当你从url something.com/watch/9进入新页面时，你可以得到ID=9，根据ID你可以从你的数据源中得到对象。然后设置状态。这是创建新页面的最简单方法。@Palash因此，当我转到新页面时，我需要设置一个新组件来呈现该特定页面，但如何获取ID并设置从上一页传递的状态？可以在URL的查询参数中传递ID，

href={

/watch/${ID}？ID=${ID}

并访问URL

窗口.location.href