將引數傳遞到ReactJS中的另一個頁面

我遇到了一個問題，我希望將一個頁面上傳遞的資訊發送到另一個頁面，我說的另一個頁面就像一個頁面。

我已經嘗試使用 props、params 將這個頁面的引數傳遞給另一個頁面，但沒有任何成功。

我相信這是非常簡單的事情，但它讓我沒有解決方案

主頁.jsx

import React, {useEffect, useState} from 'react';
import * as Styled from './styles';
import OwlCarousel from 'react-owl-carousel';
import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel/dist/assets/owl.theme.default.css';
import { FaStar,FaInfoCircle } from "react-icons/fa";
import { NavLink } from 'react-router-dom';
import SinglePage from '../SinglePage';





 export default function Home() {

 const [data, setData] = useState([]);  


 useEffect(() => {
  fetch('https://api.rawg.io/api/games?key=328c7603ac77465895cf471fdbba8270')
   .then((res) => res.json())
   .then((data) => {
    setData(data.results);                  
    })
  .catch((err) => {
    console.log(err);
    });
  }, []);




  return (
   <>
    <Styled.Container>                     
      <div className="boxSite">
        <div className="boxBrowse">
          <div className="boxAll">
            <OwlCarousel className='owl-theme' loop margin={0} items={6} center={true} dots= 
              {false}>                
              { data.map((games)=> (
                <>
                <div className="produto" key={games.id} layoutId={games.id}>
                  <div className="imagemGame" style={{backgroundImage: 
                    `url(${games.background_image})`}}>
                    <div className="information">                          
                      <NavLink to={{                            
                        pathname:`/single-game/${games.slug}`,                            
                        }}>                          
                        <span>
                        <FaInfoCircle/>                            
                      </span>                          
                      </NavLink>    

                    <SinglePage name={games.name} />   


                                            
                    </div>
                      <div className="classificacao">
                        <span> Avalia??o <b> {games.rating} </b></span>
                        <span> <FaStar /></span>
                      </div>
                  </div>
                </div>
                </>
              ))}                  
            </OwlCarousel>

          </div>
        </div>
      </div>        
    </Styled.Container>
    
</>
)
}

單頁.jsx

import React from 'react';
import * as Styled from './styles';


 export default function SinglePage(props) {
 return (
    <>
     <h1>NAME OF THE GAME : {props.name}</h1>
   </>
 )
 }

是的，我停在這里，請有人幫助我嗎？

資訊出現在主頁上，但不在單個頁面上

uj5u.com熱心網友回復：

這取決于您的需求。

• 如果你需要在多個頁面上訪問大量資料，你應該使用像 Redux 這樣的狀態管理庫。
• 如果它只是簡單的資料，您可以將其作為查詢引數傳遞給您的頁面。
• 如果它有點復雜，您可以使用會話/本地存盤。

但是，如果沒有更多關于您想要實作的目標的詳細資訊，那么很難確切地知道要向您推薦什么。

uj5u.com熱心網友回復：

1. 將組件匯入主頁

import SinglePage from './your-single-page-file';

2. 使用標簽并在 JSX 上傳遞引數

<SinglePage name={data.variableNeeded}  />

3. 在 SinglePage 函式上添加 props 引數并像這樣使用它：

import React from 'react';
import * as Styled from './styles';


 export default function SinglePage(props) {
 return (
    <>
     <h1>NAME OF THE GAME : {props.name}</h1>
   </>
 )
 }

uj5u.com熱心網友回復：

在這種情況下，如果您使用的是 router-dom 版本 5 或更早版本，您可以使用歷史記錄通過狀態傳遞資料：

改變這個：

import { NavLink } from 'react-router-dom';

return (
  <NavLink to={{                            
    pathname:`/single-game/${games.slug}`,                            
   }}>                          
    <span>
      <FaInfoCircle/>                            
    </span>                          
  </NavLink>
)

對此：

import { useHistory } from 'react-router-dom';

const history = useHistory();

return (
  <button
    onClick(() => history.push(`/single-game/${games.slug}`,{
      foo: 'bar',
      nameGame,
    }))
  >                          
    <span>
      <FaInfoCircle/>                            
    </span>                          
  </button>
)

在您的頁面上，您可以通過道具獲取資料，例如：

import React from 'react';

export default function SinglePage(props) {
  const { nameGame } = props.location.state;

  return (
    <>
     <h1>NAME OF THE GAME : {nameGame}</h1>
    </>
  )
}

標籤：javascript 反应 反应钩子 参数 反应道具

上一篇：使用Kotlin的AndroidStudio中的UninitializedPropertyAccessException

下一篇：具有多個有效負載選項的Typescript和Reducer功能