React 中 withRouter 的作用
React 中 withRouter 的作用
1. 简介
withRouter 是 React Router 提供的一个高阶组件（Higher-Order Component, HOC），用于将路由相关的属性（如 history、location 和 match）注入到非路由组件中。通过 withRouter，可以在那些没有被直接包裹在 <Route> 组件中的组件中访问路由信息。
2. 为什么需要 withRouter
在 React Router 中，只有通过 <Route> 渲染的组件才能自动接收到路由相关的属性（history、location 和 match）。然而，在某些情况下，我们可能需要在非路由组件中访问这些属性，例如：
- 在深层嵌套的组件中需要执行路由跳转。
- 需要根据当前路由信息动态渲染组件内容。
这时，withRouter 就派上了用场，它可以将路由属性注入到任何组件中。
3. withRouter 的使用方法
withRouter 是一个高阶组件，它接收一个组件作为参数，并返回一个新的组件，新组件会包含路由相关的属性。
3.1 基本用法
import React from 'react';
import { withRouter } from 'react-router-dom';
function MyComponent(props) {
const { history, location, match } = props;
const handleClick = () => {
history.push('/new-path');
};
return (
<div>
<h1>Current Path: {location.pathname}</h1>
<button onClick={handleClick}>Go to New Path</button>
</div>
);
}
export default withRouter(MyComponent);3.2 在类组件中使用
withRouter 同样适用于类组件。
import React from 'react';
import { withRouter } from 'react-router-dom';
class MyComponent extends React.Component {
handleClick = () => {
this.props.history.push('/new-path');
};
render() {
const { location } = this.props;
return (
<div>
<h1>Current Path: {location.pathname}</h1>
<button onClick={this.handleClick}>Go to New Path</button>
</div>
);
}
}
export default withRouter(MyComponent);4. withRouter 注入的属性
withRouter 会向组件注入以下三个路由相关的属性：
4.1 history
history 对象提供了路由跳转的方法，例如：
history.push(path)：跳转到指定路径。history.replace(path)：替换当前路径，不保留历史记录。history.goBack()：返回上一页。history.goForward()：前进到下一页。
4.2 location
location 对象表示当前的路由信息，包含以下属性：
pathname：当前路径。search：URL 中的查询参数。hash：URL 中的哈希值。state：通过history.push或history.replace传递的状态。
4.3 match
match 对象包含与当前路由匹配的信息，例如：
params：动态路由参数。path：匹配的路由路径。url：匹配的 URL。
5. withRouter 的替代方案
在 React Router v5.1 及以上版本中，推荐使用 Hooks 来替代 withRouter，因为 Hooks 更简洁且易于使用。
5.1 使用 useHistory Hook
import { useHistory, useLocation } from 'react-router-dom';
function MyComponent() {
const history = useHistory();
const location = useLocation();
const handleClick = () => {
history.push('/new-path');
};
return (
<div>
<h1>Current Path: {location.pathname}</h1>
<button onClick={handleClick}>Go to New Path</button>
</div>
);
}
export default MyComponent;5.2 使用 useParams Hook
import { useParams } from 'react-router-dom';
function UserProfile() {
const { userId } = useParams();
return (
<div>
<h1>User ID: {userId}</h1>
</div>
);
}
export default UserProfile;6. 总结
withRouter 是 React Router 提供的一个高阶组件，用于将路由相关的属性（history、location 和 match）注入到非路由组件中。它在以下场景中非常有用：
- 需要在非路由组件中访问路由信息。
- 需要在深层嵌套的组件中执行路由跳转。
然而，在 React Router v5.1 及以上版本中，推荐使用 Hooks（如 useHistory、useLocation 和 useParams）来替代 withRouter，因为 Hooks 更简洁且易于维护。