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

Posted 2023-02-22

【中文标题】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> 以及您的下载链接/按钮。

好的，感谢您的详细回复

【参考方案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');