您可以在HTML容器上使用点击处理程序来捕获点击。如果点击来自
<a>标签(或标签的子标签),则可以阻止默认设置,并使用
href。
在这种情况下,您可以使用react-router的 withRouter
来获取history
对象,并使用该
push方法来通知路由器。您还可以编辑URL或以其他方式对其进行操作。
示例(使用代码取消注释并删除控制台):
// import { withRouter } from 'react-router-dom'class HTMLContent extends React.Component { contentClickHandler = (e) => { const targetlink = e.target.closest('a'); if(!targetlink) return; e.preventDefault(); console.log(targetlink.href); // this.props.history.push(e.target.href) }; render() { return ( <div onClick={this.contentClickHandler} dangerouslySetInnerHTML={{__html: this.props.content}} /> ); }}// export default withRouter(HTMLContent);const content = `<div> <a href="http://www.first-link.com">link 1</a> <a href="http://www.second-link.com"><span>link 2</span></a></div>`;ReactDOM.render( <HTMLContent content={content} />, demo);<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><div id="demo"></div>


