React：スクロールのアンカータグをクリックするとページがリロードされなくなる

Question

私は現在、反応してWikipediaスタイルのウェブサイトを作成しています。データ入力の理由から、私はそうのように、それの一部を設定するdangerouslySetInnerHTMLを使用して、データベースからの全体のHTMLを取得しています：

dangerouslySetInnerHTML={{ __html: this.props.section.text }} 

は今、それで遊んでビデオを持っているページの他の部分がありますただし、同じページの別の部分に移動するために<a href="#id>スタイルタグ（データベースを使用して設定）をクリックするたびに、ページ全体がリフレッシュされます。

これは、ビデオがリロードされ、最初から再生を開始するため、問題が発生します。

危険な設定のアンカータグを使用して、ページ全体のリロードを行わずにページの一部にスクロールする方法はありますか？

編集：以下のバージョンを使用して：

"反応"： "^ 16.0.0"、 "反応ルータ-DOM"： "^ 4.2.2"

Answer 1

キャッチデフォルトのイベントハンドラをイベント処理を自分で処理します。これをcomponentDidMountライフサイクルフックに入れることができます。あなたの質問は、タグを持っているのでまたcomponentWillUnmount

var aTags = document.querySelectorAll('a[href]'); //use apt selector for you section 


    aTags.forEach(aTag =>aTag.addEventListener('click',function(e){ 
      e.preventDefault(); 
      e.nativeEvent.stopImmediatePropagation() 
      e.stopPropagation() 
      var href = e.target.href; 
      history.pushState({},'',href); 
     })); 

Answer 2

でこれらのハンドラを削除し、「反応し、ルータを」私はあなたがあなたのアプリケーションでそれを使用すると仮定し、私はまた、あなたがどのv4.x.最新バージョンを使用していると仮定します

これまで私がこれに取り組んできた方法は、React Router Hash linkパッケージを使用していました。あなたは、なぜあなたはLinkを使用していないルータV4を反応させるの使用しているので

// In YourComponent.js 
... 
import { HashLink as Link } from 'react-router-hash-link'; 
... 
// Use it just like a RRv4 link (to can be a string or an object, see RRv4 api for details): 
<Link to="/some/path#with-hash-fragment">Link to Hash Fragment</Link> 

Answer 3

を：彼らのドキュメントに記載されたとして、あなたは（あなたの<a href="#id"><Link>と交換してください）そのようにそれを使用することができますか？

... 
import { Link } from 'react-router-dom'; 
... 
<Link to={{ 
    pathname: '/courses', 
    search: '?sort=name', 
    hash: '#the-hash', 
    state: { fromDashboard: true } 
}}/> 

ドキュメントhereがあります。

Answer 4

あなたのコンポーネントにeventListenerを追加すると、hrefという属性値が#で始まるすべてのアンカータグをリスンすることができます。

componentDidMount()メソッドの中で、<a>タグをすべて選択します。href="#..."です。 document.querySelectorAll("a[href^='#']")でこれを行うことができます。これは、一致したすべてのノードの配列を返します。それをループして、それぞれにeventListenerをアタッチすることができます。

eventListenerはclickをリッスンし、デフォルトの動作（別のページにリダイレクト）しない代わりにルータにプッシュする機能を実行します。上記のスニペットは、あなたがwithRouter HOCを使用していると仮定し

class MyApp extends React.Component { 
 

 
    constructor(props) { 
 
    super(props); 
 
    } 
 

 
    componentDidMount() { 
 
    document.querySelectorAll("a[href^='#']").forEach(node => { 
 
     node.addEventListener('click', e => { 
 
     e.preventDefault(); 
 
     console.log(e.target.href); 
 
     //this.props.history.push(e.target.href); 
 
     }); 
 
    }) 
 
    } 
 
    
 
    render() { 
 
    const myMarkup = "<ul><li><a href='#'>Page link 1</a></li><li><a href='#test'>Page link 2</a></li><li><a href='https://google.com'>External link</a></li></ul>"; 
 
    return(
 
     <div id="container" dangerouslySetInnerHTML={{__html: myMarkup}}></div> 
 
    ); 
 
    } 
 
} 
 
    
 
ReactDOM.render(<MyApp />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="app"></div>

（以下のコメントを外します）。それ以外の場合、プッシュは機能しません。詳細はHow to push to History in React Router v4?への私の答えを見てください。