制御されていないコンポーネントを使用してルートを更新する

Question

私はuncontrolledリンクタグを持っています<a class="link" href="#">Click Me</a>私は反応のルート変更を呼び出すために使いたいと思います。

// Slowly shifting from JQuery 
$(".link").on("click", (evt) => { 
    evt.preventDefault(); 
    var browserHistory = createBrowserHistory();   
    browserHistory.push('/detail/' + evt.target.dataset.id); 

    // expect react-router to update view based on route change 
    // ??? 
}); 

可能であれば、全面的なリロードを排除したいと思います。したがって、location.href="/detail/"などの類似の性質のものを私は避けたいと呼んでいます。

私はこれをどのように達成するのですか？

Answer 1

解決策が見つかりました（私にとってはとにかく）。これは私のアプリにヒストリモジュールをインポートする方法の問題であることが判明しました。

説明できない理由から、アプリケーション内の他のモジュールから参照される単一のヒストリモジュールを作成すると、この問題が解決されました。

// history.ts 
import createHistory from 'history/createBrowserHistory'; 
export default createHistory(); 

他のモジュール間履歴オブジェクトをインポートするときに明らかに、これらのモジュール間で同じオブジェクトを参照しません。または私はそれを間違って参照していました。各モジュールは個別の履歴オブジェクトを参照していました。これにより、あるモジュールのhistory.listen(...)が別のモジュールのhistory.push(...)を検出できなくなりました。

// app.tsx 

/* FAILS: Creates multiple history objects across modules */ 
import { createBrowserHistory } from 'history'; 
const history = createBrowserHistory(); 

/* SUCCEEDS: This creates a single history object shared across modules */ 
import history from './history'; // This works! 
... 
ReactDOM.render(
    <Router history={history}> 
     <App.Frame> 
     ... 
     </App.Frame> 
    </Router> 
    , document.getElementById('root') 
); 

// config.ts 

/* FAILS: Creates multiple history objects across modules */ 
import { createBrowserHistory } from 'history'; 
const history = createBrowserHistory(); 

/* SUCCEEDS: This creates a single history object shared across modules */ 
import history from './history'; // This works! 
... 
$('.link').each((i, e) => { 
    $(e).on("click", (evt) => { 
     evt.preventDefault(); 
     history.push('/detail/' + evt.target.dataset.id); 
    }); 
}) 

ソリューションに私を導いた次のポストへのクレジット：あなたとjqueryのを使用することshouln'tすべてのRouting in React, the uncomplicated way