Pass parameters to another page in React JS-CodePudding

I'm having a problem where I want the information that is being passed on a page to be sent to another page, this other page I say is like a single page.

I've already tried to pass the parameters of this page to another with props, params, but without any success.

I believe it is something very simple, but it left me without a solution

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

Yes, I stopped here,please can someone help me?

Information is appearing on the Homepage, but not on the single page

CodePudding user response：

In this case, if you're using version 5 or earlier of router-dom you can pass the data via state, using history:

Change this:

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

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

To this:

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>
)

And on your page you can get the data via props, like:

import React from 'react';

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

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

CodePudding user response：

It depends on your needs.

If you need to access a lot of data over several pages, you should use a state management library like Redux.
If it's only simple data, you can pass it as query parameters to your page.
If it's a bit more complexe, you can use the session / local storage.

But it's a bit hard to know what to recommend you exactly without more info about what you want to achieve exactly.

CodePudding user response：

Import component into Homepage

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

Use the tag and pass a parameter on the JSX

<SinglePage name={data.variableNeeded}  />

On the SinglePage function add the props parameter and use it like this:

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


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