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);
    });
})

感谢以下帖子引导我找到解决方案：Routing in React, the uncomplicated way

使用不受控制的组件更新路由

1 个答案: