История использования маршрутизатора React

#reactjs #react-router

#reactjs #реагировать-маршрутизатор

Вопрос:

Я хочу, чтобы, когда я нажимаю на кнопку, она перенаправляла меня на страницу оплаты.

 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
 

Комментарии:

1. А что происходит с вашим текущим кодом?

2. @jonrsharpe когда я нажимаю на компонент GLC, я получаю эту ошибку типа: Объект (…) не является функцией

3. useHistory необходимо импортировать из react-router, а не реагировать. Ie: import { useHistory } from 'react-router'

4. Я слепой, спасибо, чувак

5. @Николас Тауэр Могу я спросить тебя кое о чем

Ответ №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");
   }

   // ...
}

 

Тогда вы можете работать .