web-dev-qa-db-ja.com

反応ルーターで通常のアンカーリンクを使用する方法

this angular question と非常に似ています：反応ルータを使用するときにページ内ナビゲーションにアンカーリンクを使用するにはどうすればよいですか？

つまり、react-routerを使用するときに、次のプレーンHTMLを実装するにはどうすればよいですか？

<a href="#faq-1">Question 1</a>
<a href="#faq-2">Question 2</a>
<a href="#faq-3">Question 3</a>

<h3 id="faq-1">Question 1</h3>
<h3 id="faq-2">Question 2</h3>
<h3 id="fa1-3">Question 3</h3>

現在、このようなリンクのクリックをインターセプトし、アンカー位置までスクロールします。これは、ページの特定のセクションに直接リンクすることが不可能であることを意味するため、満足のいくものではありません。

javascriptanchorreactjsreact-router
33
starwed

アンカーリンクの問題は、react-routerのデフォルトではURLのハッシュを使用して状態を維持することです。幸いなことに、 Location documentation のように、デフォルトの動作を別のものに置き換えることができます。あなたの場合、おそらくHistoryLocationオブジェクトを使用して「クリーンURL」を試してみたいと思うでしょう。つまり、react-routerはURLハッシュを使用しません。次のように試してください：

Router.run(routes, Router.HistoryLocation, function (Handler) {
  React.render(<Handler/>, document.body);
});
17
Colin Ramsay

React Router Hash Link 私のために働いた。インストールと実装が簡単：

$ npm install --save react-router-hash-link

Component.jsで、リンクとしてインポートします。

import { HashLink as Link } from 'react-router-hash-link';

アンカー<a>を使用する代わりに、<Link>を使用します。

<Link to="#faq-1>Question 1</Link>
<Link to="#faq-2>Question 2</Link>
<Link to="#faq-3>Question 3</Link>

注：HashRouterの代わりにRouterを使用しました

8
maledr53