Question

在 React JS 中将参数传递给另一个页面

2022-05-17

7160

javascript reactjs react-hooks react-router-dom react-props

我遇到了一个问题，我想将一个页面上传递的信息发送到另一个页面，我说的这个其他页面就像一个单页。

我已经尝试使用 props、params 将此页面的参数传递给另一个页面，但没有成功。

我相信这很简单，但它让我没有解决方案

Homepage.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>
    </>
  )
}

SinglePage.jsx

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

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

是的，我在这里停了下来，有人可以帮帮我吗？

信息出现在主页上，但没有出现在单页上

Answer 1

在这种情况下，如果您使用的是 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>
)

并且在您的页面上，您可以通过 props 获取数据，例如：

import React from 'react';

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

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

Answer 2

这取决于您的需求。

如果您需要在多个页面上访问大量数据，则应使用状态管理库，例如 Redux。
如果只是简单数据，则可以将其作为查询参数传递给页面。
如果情况更复杂，则可以使用会话/本地存储。

但是，如果没有更多关于您想要实现的目标的信息，很难知道该向您推荐什么。

Answer 3

将组件导入主页

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

使用标签并在 JSX 上传递参数

<SinglePage name={data.variableNeeded}  />

在 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>
   </>
 )
 }