反应路由器使用历史答案

【问题标题】：React router useHistory反应路由器使用历史
【发布时间】：2020-12-19 21:50:18
【问题描述】：

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

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

【问题讨论】：

你当前的代码会发生什么？
@jonrsharpe 当我点击 GLC 组件时，我得到这个 TypeError: Object(...) is not a function
useHistory 需要从 react-router 导入，而不是 react。即：import { useHistory } from 'react-router'
我是个盲人，谢谢你
@Nicholas Tower 我能问你一些事情吗

标签： reactjs react-router

【解决方案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");
   }

   // ...
}

那你就可以工作了。

【讨论】：