React-router-dom ：是否可以使用 Link 而不将用户路由到另一个页面？答案

【问题标题】：React-router-dom : Is it possible to use Link without routing the user to another page?React-router-dom ：是否可以使用 Link 而不将用户路由到另一个页面？
【发布时间】：2020-07-20 16:03:56
【问题描述】：

我有这张桌子：

<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>

我的问题： 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`.

【问题讨论】：

为什么不能使用普通的<button> 并将其样式设置为看起来像一个链接？
@apokryfos 没有想到那个按钮，因为它是一个按钮而不是一个链接。
另外，我的应用程序中的链接有一个特殊的外观，我需要它们看起来都一样，即使这个链接不会重定向到另一个页面
这里的问题是<Link> 组件不是任何旧链接，而是具有特定目的的反应路由器链接。您所描述的可以是具有下载属性的锚链接（例如<a href=X download>...</a>），也可以是通过单击按钮触发的回调。唯一的问题是视觉问题，因此您需要找到一种方法将相同的样式应用于<Link> 以及您的下载链接/按钮。
好的，感谢您的详细回复

标签： javascript html reactjs react-router-dom

【解决方案1】：

尝试输入#，即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>

【讨论】：

【解决方案2】：

看来，您不再需要链接，为您的 td 元素设置一个样式，使其表现得像一个链接，并附加 onClick 事件监听器

我试图在这里重现您的需求

App.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>

【讨论】：

有道理。谢谢

【解决方案3】：

只需用自定义 div 替换您的链接，然后用一点 css 设置它的样式（光标：指针、颜色、:hover:...）

然后在您的 onFichierJointLinkClicked 中，在另一个窗口中打开您的 pdf，如下所示：

window.open(path, '_blank');

【讨论】：