ReactJS onClick 打开新页面

在 ReactJS 中，要打开一个新的页面（或链接到另一个页面），可以使用 Link 或 a 元素，但是如果你需要在单击事件中打开一个新的页面，可以使用以下两种方法：

1. 使用 react-router-dom 中的 history 对象

使用 react-router-dom 中的 history 对象可以让你在单击事件中改变 URL 并跳转到一个新的页面。首先，需要在组件中导入 history 对象：

import { useHistory } from 'react-router-dom';

然后，在组件中使用 useHistory() hook 以获取 history 对象：

const history = useHistory();

最后，在需要打开新页面的单击事件中，使用 history.push() 方法改变 URL 并跳转到新页面：

const handleClick = () => {
  history.push('/new-page');
};

这个方法需要你的组件被 Route 包裹或者被包含在被 Route 包裹的组件中。这是因为 history 对象只能在包含 Router 的组件中使用。

2. 使用 window.location.href

使用 window.location.href 可以直接改变 URL 并跳转到一个新的页面。在需要打开新页面的单击事件中，使用下面的代码：

const handleClick = () => {
  window.location.href = '/new-page';
};

这个方法可以在任何地方使用，但它将直接改变 URL 并加载一个新的页面，而不是使用 React 的路由系统进行跳转。

注：在 React 16.8 或之前的版本中，可以使用 withRouter 高阶组件来获得 history 对象。

以上就是使用 ReactJS 实现单击事件打开新页面的两种方法。根据你的需求和项目的情况，选择适合你的方法即可。