перенаправить на новую страницу при нажатии кнопки в React js

#reactjs #redirect #button

Вопрос:

можем ли мы использовать <a> тег в reactjs для перенаправления на страницу
В настоящее время, я использовал его для ссылки, и по какой-то причине он не работает

кроме того, я использовал Link Route useHistory для переориентации, и даже они не работают

Я добавил один button из них в таблицу, и я хочу, чтобы redirect он отображался на новой странице при нажатии

с useHistory помощью я импортировал это в свой файл js

 import { useHistory } from "react-router-dom";
 

Я использовал это в своей export function

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

используется handleClick() в button

  <button type="button" onClick={handleClick}>
    Click Me!
 </button>
 

Фрагмент кода

 import React from 'react';
import '../scss/components/table';
import data from '../../public/userData';
import { useHistory } from "react-router-dom";

export default function ReservedListView() {
  console.log('data :'   JSON.stringify(data));
  let header = Object.keys(data[0]);
  console.log('header :'   header);

  let history = useHistory();

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

  return (
    <div>
      <table id="students" class="table">
        <tbody>
          <tr>
            <th>Name</th>
            <th>Date</th>
            <th>Day</th>
            <th>SimeSlot</th>
          </tr>
          {data.map((el, index) => (
            <tr>
              <td>{el.name}</td>
              <td>{el.date}</td>
              <td>{el.day}</td>
              <td>{el.timeSlot}</td>
            </tr>
          ))}
          <tr>
            <td colSpan="4"> 
            {/* buttons with usehistory()*/}
              <button type="button" onClick={handleClick}>
                Click Me Button!
              </button>

            {/* button with <a> tag */}
              <a href="/bookingSlot.js">Click Me!</a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  );
} 

когда я click на first button
Я получаю эту ошибку

введите описание изображения здесь

дайте мне знать, если я делаю это неправильно

Ответ №1:

В соответствии с вашим текущим кодом все должно работать нормально, проверьте этот код, это может помочь.

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

1. Спасибо! для этого взгляну и выясню фактическую проблему с моим кодом