当你在你的应用程序中包含一个主页组件时，它通常被包裹在这样的<Route>组件中：

<Route path="/movies" component={MoviesIndex} />

通过这样做，MoviesIndex组件可以访问，this.props.history因此它可以使用this.props.history.push.

某些组件（通常是标题组件）出现在每个页面上，因此没有包含在<Route>:

render() {
  return (<Header />);
}

这意味着标头不能重定向用户。

为了解决这个问题，头组件可以被包装在一个withRouter函数中，无论是在导出时：

export default withRouter(Header)

这使Header组件可以访问this.props.history，这意味着标头现在可以重定向用户。

withRouter是一个更高阶的组件，它将在渲染时将最近的路由match、当前location和historyprops传递给被包裹的组件。只需将组件连接到路由器。

并非所有组件，尤其是共享组件，都可以访问此类路由器的 props。在其封装的组件中，您将能够访问locationprop 并获取更多信息，例如location.pathname使用this.props.history.push.

这是他们 github 页面的完整示例：

import React from "react";
import PropTypes from "prop-types";
import { withRouter } from "react-router";

// A simple component that shows the pathname of the current location
class ShowTheLocation extends React.Component {
  static propTypes = {
    match: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
  };

  render() {
    const { match, location, history } = this.props;

    return <div>You are now at {location.pathname}</div>;
  }
}

// Create a new component that is "connected" (to borrow redux
// terminology) to the router.
const ShowTheLocationWithRouter = withRouter(ShowTheLocation);

可以在此处找到更多信息。

withRouter高阶组件允许您访问history对象的属性和最接近<Route>的匹配项。每当它呈现时，withRouter都会将 updated match、location和historyprops 传递给包装的组件。

import React from "react";
import PropTypes from "prop-types";
import { withRouter } from "react-router";

// A simple component that shows the pathname of the current location
class ShowTheLocation extends React.Component {
  static propTypes = {
    match: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
  };

  render() {
    const { match, location, history } = this.props;

    return <div>You are now at {location.pathname}</div>;
  }
}

// Create a new component that is "connected" (to borrow redux
// terminology) to the router.
const ShowTheLocationWithRouter = withRouter(ShowTheLocation);

withRouter 是一个高阶组件，它将通过最近的路由来访问一些关于位置和匹配的属性的属性，只有在为组件提供位于组件中的属性时才能访问它

<Route to="/app" component={helo} history ={history} />

并且相同的匹配和位置繁荣能够改变位置并使用 this.props.history.push 它应该为每个组件属性必须提供但当使用WithRouter时它可以访问位置和匹配而无需添加属性历史它可以访问方向而无需添加每个路线的属性历史记录。

它是一个高阶组件，它会在渲染时将更新的匹配、位置和历史props传递给包装的组件。但我认为它已被 react-router V6 弃用。如果使用它的属性，你可以同时使用两者useLocation或usenavigate钩子。

这是一个很小的高阶组件，它使用这两个钩子来实现以下行为withRouter：

export function withRouter(children){
    return(props)=>{
       const location = useLocation();
       const navigate = usenaviogate();
       return <Children {...props} navigate = {navigate} location = {location}
               />
                    }
        }