React.js 从 <Link to> 发送 id 或将 props 传递给其他组件

Question

当我点击它时，我有这个相册列表，我希望新页面有来自这个 album.id 的数据。我想要我在组件封面.

中单击的 id 的相册信息

基本上：

我点击带有 album.id 61a947a868f7d778e3ee73f8
我的路线 /ItemPage 打开
/ItemPage 有封面组件
我想让Cover组件获取ListItem组件的Information
/ItemPage 每次都渲染我点击的相册信息

例如：

ListItem.jsx

function ListItem({index, item}) {
const [isHovered, setIsHovered] = useState(false);
const [album, setAlbum] = useState({});


useEffect(() => {
    const getAlbum = async () => {
        try{
            const res = await axios.get("/albums/find/" + item , {
                headers:{
                    token: "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjYxOThmM2YwNzdiYzI5ZTkyZTRlZDU5MCIsImlzQWRtaW4iOnRydWUsImlhdCI6MTYzODM2MzkyNSwiZXhwIjoxNjM4Nzk1OTI1fQ.LNyVCvxwCncOWhLS_uGAXBh-WX0GQffe3CeqcMzmZK4"
                },
            });
            setAlbum(res.data);
        } catch (e) {
            console.log(e)
        }
    };
    getAlbum();
},[item])


return (
    <Link to={{ pathname:"/itemPage", album:album}}>
    <div className={"listItem"}
         style={{left: isHovered && index * 225 - 50 + index * 2.5}}
         onMouseEnter={() => setIsHovered(true)}
         onMouseLeave={() => setIsHovered(false)}>

        {album.id}

.......

现在我有这个专辑项目，其 ID 是： 61a947a868f7d778e3ee73f8

我的ItemPage.jsx看起来像这样

const ItemPage = () => {
const [lists, setLists] = useState([]);
return (
    <div className={"itemPage"}>
        <Navbar/>
        <Cover/>
    </div>
);

};

Cover.jsx

return (
        <div className={"cover"}>
            <div className="coverImage">
                <img src="{album.img}" alt=""/>
            </div>
            <div className="coverInfo">
                <Card>
                    <CardContent>
                        <Typography textAlign={"center"} gutterBottom variant="h5" component="div">
                        </Typography>
                        <Typography variant="body2" color="white" textAlign={"center"} fontSize={150}>
                            {album.rating}
                        </Typography>
                    </CardContent>
                        {album.date} {album.title}
                        <div className="cardImages">
                        </div>
                </Card>
            </div>
            <Watch/>
            <Similiar/>
        </div>

App.jsx路线

<Route path="/itemPage" element={<ItemPage/>}/>

Answer 1

如果要从 URL 访问 id，则必须为列表定义动态路由 App.jsx:

<Route path="/itemPage/:item" element={<ItemPage/>}/>

在 ItemPage.jsx 组件中，您可以使用 react-router-dom 中的 useParam 钩子来访问选定的 id。

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

let { item } = useParams();

然后在itempage中你可以调用API来获取选中的item数据。

React.js 从 <Link to> 发送 id 或将 props 传递给其他组件

React.js send id from <Link to> or pass props to other component

javascript

reactjs

react-props