如何在React中使用React Router的hooks如useHistory useLocation等简化路由管理

在React中使用React Router的hooks可以帮助简化路由管理。以下是如何使用常见的React Router hooks，如useHistory和useLocation的示例：

1. useHistory:

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

function Home() {
  const history = useHistory();
  
  const handleClick = () => {
    history.push('/about');
  }

  return (
    <div>
      <h1>Home Page</h1>
      <button onClick={handleClick}>Go to About Page</button>
    </div>
  );
}

2. useLocation:

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

function About() {
  const location = useLocation();
  
  return (
    <div>
      <h1>About Page</h1>
      <p>Current pathname: {location.pathname}</p>
    </div>
  );
}

使用这些hooks可以更轻松地管理路由，而不需要直接访问props.history或props.location等属性。通过调用useHistory来获取history对象，可以使用push、replace等方法来进行页面跳转。而使用useLocation可以轻松地获取当前页面的pathname等信息。