sometimes seen 人们在导出组件时将其组件包装在 withRouter 中：
import { withRouter } from 'react-router-dom';
class Foo extends React.Component {
// ...
}
export default withRouter(Foo);
这是做什么用的，我应该什么时候使用它？
【问题讨论】：
标签： reactjs react-router
当你在你的应用中包含一个主页组件时，它通常被包裹在一个<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。如果接受的答案提到这一点会很好，因为重定向用户并不是withRouter 的唯一用例。否则，这是一个很好的自我 QNA。
history 或match，我认为答案会更完整？即为什么要明确提及withRouter？
withRouter 是一个高阶组件，它将在渲染时将最近路由的match、当前location 和history 道具传递给包装的组件。只是它将组件连接到路由器。
并非所有组件，尤其是共享组件，都可以访问此类路由器的 props。在其包装的组件中，您将能够访问 location 属性并获取更多信息，例如 location.pathname 或使用 this.props.history.push 将用户重定向到不同的 url。
这是来自他们的 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);
更多信息可以在here找到。
【讨论】：
withRouter 是一个高阶组件，它将通过最近的路由来访问一些关于位置和匹配的属性，只有在为组件提供位于组件中的属性时才能访问它
<Route to="/app" component={helo} history ={history} />
同样匹配和位置繁荣能够改变位置并使用 this.props.history.push 它应该为每个组件属性提供必须提供但是当使用 WithRouter 时它可以访问位置和匹配而无需添加属性历史可以在不添加每个路线的属性历史的情况下访问方向。
【讨论】：
withRouter 高阶组件允许您访问history 对象的属性和最接近<Route> 的匹配项。 withRouter 将在渲染时将更新的 match、location 和 history 属性传递给被包装的组件。
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);
【讨论】：
它是一个高阶组件，它会在渲染时将更新的匹配、位置和历史道具传递给包装的组件。
但我认为它已被 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}
/>
}
}
【讨论】：
默认情况下，react router 不会将其所有信息传递给我们所引用的组件
例如- 如果我们在组件上有一条路由，如下所示
<Route path="/details/:id">
<Details />
</Route>
我们想从 Route 中获取一些道具，因此我们必须使用 withRouter 要使用它，我们必须先通过
导入它import { withRouter } from "react-router-dom";
然后在导出组件时使用它
export default withRouter(Details);
【讨论】：