withrouter

WithRouter是React Router提供的一个高阶组件，用于将路由信息传递给被包裹的组件。通过使用WithRouter，我们可以在不是路由组件的地方访问到路由信息，比如在函数组件中。

WithRouter的使用方式是通过导入`withRouter`函数，并将需要传递路由信息的组件作为参数传递给`withRouter`函数，然后将返回的高阶组件包裹在组件中。这样，被包裹的组件就可以通过props获取到路由信息，比如`history`、`location`和`match`等。

通过使用WithRouter，我们可以在被包裹的组件中实现编程式的路由导航。我们可以使用`props.history.push(path)`进行页面跳转，其中`path`是要跳转的路由路径。同样地，我们也可以使用`props.history.replace(path)`进行页面跳转，但是使用`replace`方法会替换当前的路由历史记录，而不是添加新的历史记录。

此外，React Router还提供了声明式的路由导航方式，可以使用`Link`和`NavLink`组件来实现路由的跳转。`Link`组件用于生成一个包含指定路径的超链接，点击该超链接时会触发路由的跳转。而`NavLink`组件是`Link`的一个特殊版本，它可以根据当前路由是否与指定路径匹配来添加`active`类名，方便我们为当前激活的导航项添加样式。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [【React路由】编程式路由导航和withRouter的使用——push / replace](https://blog.csdn.net/xuxuii/article/details/125786195)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]