Reactjs 使用非受控部件更新路线

Reactjs 使用非受控部件更新路线,reactjs,react-router,Reactjs,React Router,我有一个链接标签,我想用它来调用react中的路由更改 //慢慢地从JQuery转移 $(“.link”)。在(“单击”上,(evt)=>{ evt.preventDefault(); var browserHistory=createBrowserHistory(); browserHistory.push('/detail/'+evt.target.dataset.id); //期望react路由器根据路由更改更新视图 // ??? }); 我想消除一个完整的页面重新加载,如果有可能的话。

我有一个链接标签
,我想用它来调用react中的路由更改

//慢慢地从JQuery转移
$(“.link”)。在(“单击”上,(evt)=>{
evt.preventDefault();
var browserHistory=createBrowserHistory();
browserHistory.push('/detail/'+evt.target.dataset.id);
//期望react路由器根据路由更改更新视图
// ???
});
我想消除一个完整的页面重新加载,如果有可能的话。因此,调用
location.href=“/detail/”
或任何类似性质的内容都是我想要避免的

有人知道我是如何做到这一点的吗?

我找到了解决方案(反正是为我)。事实证明,这是我将历史记录模块导入应用程序的方式的一个问题

由于我不能完全解释的原因,创建一个历史模块供我的应用程序中的其他模块引用解决了这个问题

//history.ts
从“历史记录/createBrowserHistory”导入createHistory;
导出默认的createHistory();
显然,当跨其他模块导入历史对象时,它不会跨这些模块引用相同的对象;或者我没有正确地引用它。每个模块都引用一个单独的历史对象。这阻止了
历史记录。侦听(…)
(在一个模块中)检测到
历史记录。在另一个模块中推送(…)

//app.tsx
/*失败:跨模块创建多个历史对象*/
从“历史”导入{createBrowserHistory};
const history=createBrowserHistory();
/*成功:这将创建跨模块共享的单个历史对象*/
从“./history”导入历史记录;//这管用!
...
ReactDOM.render(

首先,您不应该将jquery与React一起使用,但是您可以参考此链接