通过 React Router 从 json 传递数据

Question

你好 Stackoverflow 社区。 所以我在将数据从一个组件传递到另一个组件时遇到了问题。 所以我有免费播放组件，它从 json 获取免费播放数据并将其呈现在显示器上。 我还有一个链接，它应该打开一个支付路径并传递数据。 在付款中，我有一个过滤器 function，它是基于 id 过滤的。 无论如何，当我按下链接时，它应该呈现图像 class 和价格，但它没有，我不知道为什么。 不要被上下文混淆，它只是搜索功能。 我已经多次发布这个问题，但似乎没有人给我答案，为什么会这样。 我可以使用 Redux 来实现此功能吗？ 如果有人可以帮助我，我将不胜感激。 干杯

import React from 'react'
import { useLocation } from "react-router-dom";
import data from "../data.json";

function Payment() {  
 const { state: { product } } = useLocation();
    return (
        <div  className='Payment'>
         <img src={product.image}></img>
         <h1>{product.price}</h1>
         <h1>{product.name}</h1>          
        </div>
    )
}

export default Payment


import React from 'react'
import data from "./data.json";
import {
    
    Link
  } from "react-router-dom";
import { SearchContext } from './SearchContext';


function FreeToPlay() {
  const {filterProduct}=React.useContext(SearchContext);
    return (
        <>
          <div className='All' >
            {data[0].freetoplay.filter(filterProduct).map((product) => {
              return (
                <div className='f2p' key={product.id}>               
                    <img src={product.image}></img>
                    <h2>{product.name}</h2>
                    <h5>{product.price}</h5>
               <Link  className='link'  to={{
    pathname: `/payment/${product.id}`,
    state: {
      product, 
    },
  }}>
        </div>
              );
            })}
          </div>
        </>
      );
}

export default FreeToPlay

json
[
  {
    "freetoplay": [{
        "id": "0",
        "image": "src=fsdf",
        "price": "60$",
        "name": "CS Go"
      },
      {
        "id": "1",
        "image": "src=fsdf",
        "price": "6$",
        "name": "Fifa"
      }
    ],
 
    "action": [{
        "id": "2",
        "image": "src=fsdf",
        "price": "60$",
        "name": "doom"
      },
      {
        "id": "3",
        "image": "src=fsdf",
        "price": "66$",
        "name": "cyberpunk"
      }
    ],
    
  }
]

import React, { useState, useContext } from 'react';

export const SearchContext =React.createContext(null)
export  default function SearchProvider({children}) {

const [searchValue, setSearchValue] = React.useState("");


function filterProduct(product) {
     return product.name.toLowerCase().includes(searchValue.toLowerCase());
     }
      return( 

       <SearchContext.Provider value ={{filterProduct,   searchValue, 
        setSearchValue}}>
             {children} 
        </SearchContext.Provider>             
             ); }


function Routes() {
    return (
       
        <div>     
          <Router>                 
            <SideBar /> 
          <Switch>   
           <Route  path="/payment/:productId">
             <Payment/>
           </Route>             
           <Route path="/freetoplay">  
            <FreeToPlay  />
           </Route>  
            <Route path="/action">  
              <Action  />
            </Route>           
            </Switch>  
          </Router>
       </div>
    )
}

export default Routes

Answer 1

您可以尝试使用路由 state 通过路由转换发送product object。

<Link
  to={{
    pathname: `/payment/${product.id}`,
    state: {
      product, // <-- the mapped product from data
    },
  }}
  className='link'
>
  Buy Now
</Link>

在接收路由上呈现的组件上，您可以从位置 object 访问 state。

通过props （ this.props或props如果是功能组件）。 可以直接由Route渲染，也可以用withRouter高阶组件包裹。

const { state: { product } } = props.location;

通过useLocation反应挂钩。

const { state: { product } } = useLocation();