React路由器useHistory

Question

我想当我按下按钮时，它会将我重定向到付款页面。

import React,{useHistory, useState} from 'react'
import data from './data.json'
function GLC() {

    let history = useHistory();
    function handleClick() {
        history.push("/payment");
      }

    return (
        <div  >
        {data.map((postData) =>{
            console.log(postData)
            return(
            <div key= 
            {postData.id}>
           <div className='absolute '> 
            <img className='w-screen object-contain'src="./ModImages/Gclass.jpg"></img>         
            <h1 className='absolute ml-24 md:text-5xl sm:text-5xl  top-8'>Class G</h1>
            <h1 className='absolute text-base font-mono  ml-24 top-24'>$43,600</h1> 
            <button onClick={handleClick} className=' absolute text-black-600 h-10 top-24 ml-24 mt-32 bg- 
             white w-36 rounded-full focus:outline-none focus:ring-2 focus:ring-gray-600'>BuyNow</button>

           </div>
           </div>
            )
        })
        }
    </div>                
    )
}

export default GLC

Answer 1

// Make sure you alreadly installed the react-router-dom package.
import { useHistory } from 'react-router-dom';


function GLC() {
   const history = useHistory();

   function handleClick() {
      history.push("/payment");
   }

   // ...
}

然后你就可以工作了。