Обновление маршрута с использованием неуправляемого компонента

Question

У меня есть неконтролируемый тег ссылки <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);
    });
})

Отдайте должное следующему посту, который привел меня к решению: маршрутизация в React, несложный способ