react withRouter

Posted qdjj

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react withRouter相关的知识,希望对你有一定的参考价值。

高阶组件中的withRouter, 作用是将一个组件包裹进Route里面, 然后react-router的三个对象history, location, match就会被放进这个组件的props属性中.

 1 import React from ‘react‘
 2 import ‘./nav.css‘
 3 import {
 4     NavLink,
 5     withRouter
 6 } from "react-router-dom"
 7 
 8 class Nav extends React.Component{
 9     handleClick = () => {
10         // Route 的 三个对象将会被放进来, 对象里面的方法可以被调用
11         console.log(this.props);
12     }
13     render() {
14         return (
15             <div className={‘nav‘}>
16                 <span className={‘logo‘} onClick={this.handleClick}>博客园</span>
17                 <li><NavLink to="/" exact>随笔</NavLink></li>
18                 <li><NavLink to="/activities">文章</NavLink></li>
19                 <li><NavLink to="/topic">日记</NavLink></li>
20                 <li><NavLink to="/login">评论</NavLink></li>
21             </div>
22         );
23     }
24 }
25 
26 // 导出的是 withRouter(Nav) 函数执行
27 export default withRouter(Nav)
所以withRouter的作用就是, 如果我们某个东西不是一个Router, 但是我们要依靠它去跳转一个页面, 比如点击页面的logo, 返回首页, 这时候就可以使用withRouter来做.
在这个例子中, 我将span使用withRouter作为一个可点击跳转的Link

以上是关于react withRouter的主要内容,如果未能解决你的问题,请参考以下文章

使用“withRouter”和 Typescript 时出现类型问题

withRouter' 不是从 'react-router-dom 导出的

React Router - 更新版本后 withRouter 上的 Typescript 错误

如何通过 react-redux 使用 refs 进行反应,withRouter?

react: typescript integrate withRouter

react ——withRouter——页面隐式传值—嵌套路由——渲染方式——自定义导航组件