Reactjs 如何最优雅地处理超链接上的onclick

我想要的是呈现如下的HTML

这意味着某人可以右键单击链接并在新选项卡中打开。这将绕过react路由器提供的奇特的pushState功能

但是，如果有人定期单击，我需要更新redux以说明新的slug是什么（或分页页面或其他内容），并调用

browserHistory.push（…）

必须有一种更简单方便的方法。它几乎可以完成所有这些，而不会造成混乱。下面是我的应用程序的外观：

// imports
import { browserHistory } from 'react-router'
import changeSlug from './actions'

// the function
makeURL(thing) {
  return `/page/${thing.slug}`
}

// this click method
handleClick(event, thing) {
  event.preventDefault()
  this.props.dispatch(changeSlug(thing.slug))
  browserHistory.push(`/page/${thing.slug}`)
}

// the JSX
<a href={makeURL(myobject)}
  onClick={(event) => handleClick(event, myobject)}
>Go to {myobject.title}</a>

//导入
从“react router”导入{browserHistory}
从“/actions”导入changeSlug
//功能
makeURL（东西）{
返回`/page/${thing.slug}`
}
//此单击方法
handleClick（事件、事物）{
event.preventDefault（）
这个.props.dispatch（changeSlug（thing.slug））
browserHistory.push（`/page/${thing.slug}`）
}
//JSX

此外，我还尝试在事件处理程序中使用

event.target

来访问

a.href

属性，但由于

标记包含

元素，因此

事件。target

是我在

元素中单击的

标记

您可以使用react_router中的

来确定OneNet/etc。 您的

中的操作（在

中）

你也可以包装 在

中添加您的

，并向其添加一些属性和句柄 单击事件

您还可以将

display:block

样式添加到

=>中 不应通过

您可以使用react_router中的

来确定OneNet/etc。 您的

中的操作（在

中）

你也可以包装 在

中添加您的

，并向其添加一些属性和句柄 单击事件

您还可以将

display:block

样式添加到

=>中 不应通过

---

我从react router中发现了

链接

，但这不能处理新操作的分派。您应该从组件调用操作。让link处理我从react router发现的路由

link

，但这不处理新操作的分派。您应该从组件调用操作。让link处理routingI用于使用组件的

componentDidMount

获取路由参数并更新redux存储。现在它可以正常工作了，但是我的root index.js变得更复杂了，因为它需要导入特定应用程序的操作函数。我以前使用组件的

componentDidMount

获取路由参数并更新redux存储。现在它可以正常工作了，但是我的root index.js变得更复杂了，因为它需要导入特定应用程序的动作函数。