使用带反应路由器的锚点

问题描述

如何使用react-router，并将链接导航到特定页面上的特定位置？ （例如 / home-page＃section-three ）

How can I use react-router, and have a link navigate to a particular place on a particular page? (e.g. /home-page#section-three)

详细信息：

我在我的React应用程序中使用 react-router 。

I am using react-router in my React app.

我有一个站点范围的导航栏需要链接到页面的特定部分，例如 / home-page＃section-three 。

I have a site-wide navbar that needs to link to a particular parts of a page, like /home-page#section-three.

所以，即使您说 / blog ，点击此链接仍会加载主页， - 三个滚动到视图中。这正是标准< a href =/ home-page＃section-three> 的工作方式。

So even if you are on say /blog, clicking this link will still load the home page, with section-three scrolled into view. This is exactly how a standard <a href="/home-page#section-three> would work.

注意：react-router的创建者没有给出明确的答案。他们说它正在进行中，并且同时使用其他人的答案。我会尽力保持这个问题随着进展和可能的解决方案更新，直到占主导地位。

Note: The creators of react-router have not given an explicit answer. They say it is in progress, and in the mean time use other people's answers. I'll do my best to keep this question updated with progress & possible solutions until a dominant one emerges.

研究：

这个问题来自2015年（所以10年前的反应时间）。最受欢迎的答案是使用 HistoryLocation 而不是 HashLocation 。基本上这意味着将位置存储在窗口历史记录中，而不是存储在哈希片段中。

This question is from 2015 (so 10 years ago in react time). The most upvoted answer says to use HistoryLocation instead of HashLocation. Basically that means store the location in the window history, instead of in the hash fragment.

坏消息是......甚至使用HistoryLocation（大多数教程和d） ocs说要在2016年做，）锚标签仍然不起作用。

Bad news is... even using HistoryLocation (what most tutorials and docs say to do in 2016), anchor tags still don't work.

ReactTraining上一个关于如何使用anchor链接与react-router的线程。这是没有确认的答案。请注意，因为大多数建议的答案都已过时（例如，使用中的哈希道具< Link> ）

A thread on ReactTraining about how use anchor links with react-router. This is no confirmed answer. Be careful since most proposed answers are out of date (e.g. using the "hash" prop in <Link>)

推荐答案

这是我找到的一个解决方案（2016年10月）。它是跨浏览器兼容的（在ff，chrome，移动safari，safari中测试）。

Here is one solution I have found (October 2016). It is is cross-browser compatible (tested in ie, ff, chrome, mobile safari, safari).

你可以提供 onUpdate 属性。只要路由更新，就会调用此方法。此解决方案使用onUpdate属性检查是否存在与哈希匹配的DOM元素，然后在路由转换完成后滚动到该元素。

You can provide an onUpdate property to your Router. This is called any time a route updates. This solution uses the onUpdate property to check if there is a DOM element that matches the hash, and then scrolls to it after the route transition is complete.

您必须使用browserHistory而不是hashHistory。

You must be using browserHistory and not hashHistory.

答案是Rafrax中的。

Answer is by "Rafrax" in this thread.

将此代码添加到您定义<路由器> ：

Add this code to the place where you define <Router>:

import React from 'react';
import { render } from 'react-dom';
import { Router, Route, browserHistory } from 'react-router';

const routes = (
  // your routes
);

function hashLinkScroll() {
  const { hash } = window.location;
  if (hash !== '') {
    // Push onto callback queue so it runs after the DOM is updated,
    // this is required when navigating from a different page so that
    // the element is rendered on the page before trying to getElementById.
    setTimeout(() => {
      const id = hash.replace('#', '');
      const element = document.getElementById(id);
      if (element) element.scrollIntoView();
    }, 0);
  }
}

render(
  <Router
    history={browserHistory}
    routes={routes}
    onUpdate={hashLinkScroll}
  />,
  document.getElementById('root')
)

如果您感觉懒惰并且不想复制该代码，您可以使用仅为您定义该功能的Anchorate。

If you are feeling lazy and don't want to copy that code, you can use Anchorate which just defines that function for you. https://github.com/adjohnson916/anchorate

这篇关于使用带反应路由器的锚点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！