如何在React中使按钮重定向到另一个页面

Question

我有一个组件，它在其Class.propTypes中有一个onClick函数：onClick：PropTypes.func

在另一个组件中，我多次使用此组件来填充页面。每个组件都有一个标题，当单击该标题时，应重定向到另一页。

我的问题是，当我单击它时，它不起作用。什么也不做。 这是主组件的呈现方式：

render() {
    return (
            <Class
    title={account.AccountName}
    onClick={() => "mySite/accountview?id=" + account.AccountName} 
         >
         </Class>
          ...
    );
}

我应该在onClick中添加什么才能使其正常工作？

- Samurai Jack

---

同一个 React 应用，我没有使用路由库。accountview 是该组件的名称。 - Samurai Jack

那我建议你先安装react-router，然后将你的页面添加到路由器中。 - Chris

我猜这会很难做到。这个项目相当大，还有用vb.net和其他语言编写的部分和页面。 - Samurai Jack

但是你说那些其他页面也是用React编写的吗？ - Chris

在这种情况下，我仍然会添加react-router并使用下面Gabriel的解决方案。前者用于在React应用程序内导航，后者用于外部站点。 - Chris

Answer 1

你需要使用 React Router。

使用 Link:

<Link to={`/mySite/accountview?id=${account.AccountName}`}>something</Link>

使用 onClick：

<button onClick={() => hashHistory.push(`/mySite/accountview?id=${account.AccountName}`)}></button>

您可以使用hashHistory或browserHistory来进行操作 :D

- Gabriel Ferreira

---

使用browserHistory实现干净的URL。 ;) - scripter

嗨，Gabriel，我是否应该在我的按钮点击函数中使用window.location="Link Tag中提到的URL路径"来路由到Link Tag中提到的URL路径？ - Rakesh Nallam