Как использовать обычные якорные ссылки с реактивным маршрутизатором

Очень похож на этот вопрос angular: как использовать привязку ссылок для навигации по страницам при использовании реактивного маршрутизатора?

Другими словами, как реализовать следующий простой 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>

В настоящее время я перехватываю клики по таким ссылкам и просматриваю позицию привязки. Это неудовлетворительно, потому что это означает невозможность прямого ссылки на какой-либо раздел страницы.

Ответ 1

Проблема с привязкой ссылок заключается в том, что по умолчанию по умолчанию для по умолчанию используется хэш в URL-адресе для сохранения состояния. К счастью, вы можете поменять поведение по умолчанию для чего-то еще, согласно документации местоположения. В вашем случае вы, вероятно, захотите попробовать "чистые URL-адреса", используя объект HistoryLocation, что означает, что "реактивный маршрутизатор" не будет использовать хеш-URL. Попробуйте вот так:

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

Ответ 2

React Router Hash Link работал у меня. Простота установки и реализации:

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

В вашем компоненте .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