React router4:在onClick链接组件上更新状态

React Router 4是一个流行的用于构建单页应用程序的JavaScript库，它可以帮助我们在React应用程序中实现路由功能。

当我们在React应用程序中使用React Router 4时，我们可以使用<Link>组件来创建导航链接。当用户点击这些链接时，我们可以通过更新状态来实现页面的切换。

具体来说，当我们在onClick事件处理程序中处理链接的点击事件时，我们可以使用React的状态管理功能（如useState钩子）来更新状态。更新的状态可以是一个表示页面切换的变量，比如当前选中的导航链接的索引或路径。

以下是一个简单的示例：

import React, { useState } from 'react';
import { Link } from 'react-router-dom';

const Navigation = () => {
  const [selectedLink, setSelectedLink] = useState(0);

  const handleLinkClick = (index) => {
    setSelectedLink(index);
  };

  return (
    <div>
      <Link to="/" onClick={() => handleLinkClick(0)}>Home</Link>
      <Link to="/about" onClick={() => handleLinkClick(1)}>About</Link>
      <Link to="/contact" onClick={() => handleLinkClick(2)}>Contact</Link>

      <p>Selected link: {selectedLink}</p>
    </div>
  );
};

export default Navigation;

在上面的示例中，我们创建了一个导航组件，其中包含了三个<Link>组件来表示不同的导航链接。当用户点击这些链接时，会触发onClick事件处理程序，通过调用handleLinkClick函数来更新状态。

更新后的状态会在导航组件中显示，以便用户可以知道当前选中的导航链接是哪个。

这是一个简单的React Router 4的使用示例，它展示了如何在onClick链接组件上更新状态。当然，在实际应用中，我们还可以使用React Router的其他功能来实现更复杂的路由逻辑。