What is withRouter for in react- router - dom ?

withRouter 是 react-router-dom 库中的一个高阶组件（Higher-Order Component，简称 HOC），它的功能是向组件提供路由相关的 props（如 history, location, match 等），即使这些组件不是路由组件（即直接由 <Route> 渲染的组件）。

使用 withRouter 可以使得那些深层嵌套的组件也能够访问到路由信息，这在很多情况下非常有用，尤其是当一个组件需要知道当前的路由状态但又不在路由树中直接被 <Route> 包裹时。

使用例子：

假设我们有一个 UserProfile 组件，它显示用户的详情，但位于应用的深层次结构中，而非直接由 <Route> 渲染。为了在 UserProfile 中获取当前的路由信息（比如 URL 中的用户ID），我们可以使用 withRouter 来增强它：

javascript
import React from 'react';
import { withRouter } from 'react-router-dom';

class UserProfile extends React.Component {
    componentDidMount() {
        // 访问路由参数
        let userId = this.props.match.params.userId;
        this.fetchUserData(userId);
    }

    fetchUserData(userId) {
        fetch(`/api/users/${userId}`)
            .then(response => response.json())
            .then(data => {
                // 处理用户数据
                console.log(data);
            });
    }

    render() {
        return (
            <div>
                <h1>User Profile</h1>
                {/* 显示用户信息 */}
            </div>
        );
    }
}

// 使用 withRouter 高阶组件包裹 UserProfile 组件
export default withRouter(UserProfile);

在这个例子中，UserProfile 组件本身并不直接接收路由的 props，但通过使用 withRouter，它能够访问 this.props.match.params.userId 来获取 URL 中的用户ID，然后根据用户ID获取并显示用户的数据。

这样，UserProfile 就能够灵活地被放置在应用的任何位置，而无需担心如何接收到路由信息。