如何 <Link> 到同一页面答案

【问题标题】：How to <Link> to same page如何 <Link> 到同一页面
【发布时间】：2016-06-28 22:58:22
【问题描述】：

我正在转换一些现有代码以使用 React Router。

代码当前使用<a href="#" ...>，我将其更改为<Link to=??>。

我的问题是： "to" 参数应该使用什么？如果我使用to="#"，应用程序将路由到“/”，这不是我想要的。

如果我使用当前路由名称，它可以工作，但href="#" 的整个想法是代码不必知道它是如何访问的。

我正在使用带有 history=browserHistory 的 React Router 2。

【问题讨论】：

【解决方案1】：

我认为你可以尝试或多或少这样的事情：

<Link to={window.location.pathname} hash="/#">HASH</Link>

【讨论】：

【解决方案2】：

这是因为“this.props.route.path”是到当前页面的路由：

<Link to={this.props.route.path} ...

请注意，如果您有嵌套的 React 组件，则必须从外部组件向下传递“this.path”，如 https://facebook.github.io/react/docs/transferring-props.html 所述

【讨论】：

【解决方案3】：

<Link to='#' />

这可行，但它仍会堆积您的历史记录

【讨论】：

【解决方案4】：

对我来说，这是解决方案：

我使用了 npm 模块react-router-hash-link。它很容易使用。 Docs here

import { HashLink as Link } from 'react-router-hash-link'; <Link smooth to="/#services">Services</Link>

并将您的 <App> 组件包装在来自 npm 模块 react-router-dom 的 <HashRouter> 中

【讨论】：

【解决方案5】：

以下是一些对我有用的解决方案：

什么对我不起作用：

<Link to={this.props.route.path}
- 我正在使用功能组件，所以我没有任何this.props。也许 react-router API 中还有另一种获取路径的方法。
<Link to=".">
- 此链接为我链接到 /

【讨论】：

【解决方案6】：

它对我有用：

<Link className="dropdown-item" to="javascript:void()">
   Link Title
</Link>

【讨论】：

【解决方案7】：

如果您需要转到“/”路径的指定部分（甚至从另一个路径），您也可以使其与锚标记一起使用，如下所示：

<a href="./#your-section-id">Go to Section</a>

希望这会有所帮助。

【讨论】：