React-router-dom: возможно ли использовать Link без перенаправления пользователя на другую страницу?

Question

У меня есть эта таблица:

<Table hover bordered striped responsive size="sm">
              <thead>
                <tr>
                  <th>Nom du fichier</th>
                  <th>Date et heure d'ajout</th>
                </tr>
              </thead>
              <tbody>
                {this.state.fichierJointsInformation.map(
                  (operationSavInformation, i) => {
                    return (
                      <tr key={i}>
                        <td>
                          <Link
                            to={""}
                            onClick={this.onFichierJointLinkClicked}
                          >
                            {operationSavInformation.nomFichierOriginal}
                          </Link>
                        </td>
                        <td>{operationSavInformation.createdAt}</td>
                      </tr>
                    );
                  }
                )}
              </tbody>
            </Table>

Она выглядит так:

Что я пытаюсь реализовать : Когда пользователь щелкает по любому элементу первого столбца, соответствующий файл загружается.
Таким образом, прослушиватель onFichierJointLinkClicked onClick позаботится о запросе API и обо всем остальном.

<Link
                        to={""}
                        onClick={this.onFichierJointLinkClicked}
                      >
                        {operationSavInformation.nomFichierOriginal}
                      </Link>

МОЯ ПРОБЛЕМА: Требуется to опора в ССЫЛКА . Однако я не хочу направлять пользователя на любую другую страницу. Я просто хочу, чтобы onFichierJointLinkClicked был запущен.

Если я удаляю to проп, я получаю эту ошибку, очевидно:

index.js:1 Warning: Failed prop type: The prop `to` is marked as required in `Link`, but its value is `undefined`.

Answer 1

Похоже, вам больше не нужна ссылка, установите стиль для вашего элемента td, чтобы он вел себя как ссылка, и присоедините прослушиватель события onClick

Я попытался немного воспроизвести вашу потребность здесь

Приложение. js

import React from "react";
import { Table } from 'react-bootstrap';
import "./styles.css";



export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Table hover bordered striped responsive size="sm">
              <thead>
                <tr>
                  <th>Nom du fichier</th>
                  <th>Date et heure d'ajout</th>
                </tr>
              </thead>
              <tbody>
                  <tr>
                    <td className="likeALink" onClick={() => console.log("your custom function")}>
                        something
                    </td>
                    <td>something else</td>
                  </tr>
              </tbody>
            </Table>
      
    </div>
  );
}

.App {
  font-family: sans-serif;
  text-align: center;
}

.likeALink:hover {
  text-decoration: underline;
}

.likeALink {
  color: blue
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 2

Попробуйте поставить # т.е. to="#", как я делаю. И это работает нормально для меня -

Пожалуйста, смотрите -

<div className="pagination alternate pull-right">
  <ul>
    <li className={props.prevPage == null ? 'disabled' : ''}>
      <NavLink
        to="#"
        onClick={() => props.gotoPage(props.prevPage, props.noOfPages)}
      >
        Prev
      </NavLink>
    </li>
    {links}
    <li className={props.nextPage == null ? 'disabled' : ''}>
      <NavLink
        to="#"
        onClick={() => props.gotoPage(props.nextPage, props.noOfPages)}
      >
        Next
      </NavLink>
    </li>
  </ul>
</div>

Answer 3

Просто замените вашу ссылку на пользовательский div, а затем добавьте в стиль немного css (курсор: указатель, цвет,: hover: ...)

Затем в вашем onFichierJointLinkClicked откройте ваш PDF в другом окне, как это:

window.open(path, '_blank');