简述React-Router如何获取URL的参数和历史对象 ？

React Router 是一个用于在 React 应用中实现路由功能的库。它可以帮助我们处理 URL 参数和访问浏览器的历史对象。

1. 获取URL的参数

React Router 提供了一种方式来获取 URL 的参数。首先，你需要在你的路由定义中指定一个参数。例如，如果你有一个路径像 /user/:userId，你可以通过 this.props.match.params 来获取 userId。

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

class UserPage extends React.Component {
  render() {
    const { userId } = this.props.match.params;
    return (
      <div>
        <h1>User ID: {userId}</h1>
      </div>
    );
  }
}

function App() {
  return (
    <div>
      <nav>
        <ul>
          <li>
            <Link to="/user/1">User 1</Link>
          </li>
          <li>
            <Link to="/user/2">User 2</Link>
          </li>
        </ul>
      </nav>

      <Route path="/user/:userId" component={UserPage} />
    </div>
  );
}

export default App;

在这个例子中，当用户点击 "User 1" 或 "User 2" 链接时，UserPage 组件会被渲染，并且 userId 会被设置为对应的值。

2. 访问浏览器的历史对象

React Router 也提供了一个 history 对象，你可以通过它访问浏览器的历史 API。这个对象作为 this.props.history 可用，并且你可以在组件中使用它。

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

class Navigation extends React.Component {
  handleClick = () => {
    this.props.history.push('/home');
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Go Home</button>
      </div>
    );
  }
}

export default withRouter(Navigation);

在这个例子中，Navigation 组件使用 history.push 方法来改变当前 URL。withRouter 是一个高阶组件，它注入 history、match 和 location 到任何 React 组件中。

请注意，如果你使用的是 React Router v6，那么 API 会有一些不同。例如，this.props.match.params 会变成 useParams() 钩子，this.props.history 会变成 useHistory() 钩子。