关于withRouter的原理和用法

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

 

// withRouter实现原理: 
// 将组件包裹进 Route, 然后返回
// const withRouter = () => {
//     return () => {
//         return <Route component={Nav} />
//     }
// }

// 这里是简化版
const withRouter = ( Component ) => () => <Route component={ Component }/>

上面是实现的原理, react-router-dom 里面是有这个组件的, 直接引入使用就可以了

 

import React from 'react';
import { withRouter } from 'react-router-dom';

import './style.scss';
import { playCountConversion } from '../../../utils/utils';

class HomeSongList extends React.Component{
    render() {
        return (
            <div className='home-song-list clearfix'>
                {this.props.songList.map((item, index) => {
                    return (
                        <div className="home-song-item" key={index} onClick={() => {this.props.history.push('/playList/' + item.id)}}>
                            <img src={item.picUrl + '?param=200y200'} alt=""/>
                            <p>{item.name}</p>
                            <div className="headset-icon">{playCountConversion(item.playCount)}</div>
                        </div>
                    );
                })}
                
            </div>
        );
    }
}

export default withRouter(HomeSongList);

所以withRouter的作用就是, 如果我们某个东西不是一个Router, 但是我们要依靠它去跳转一个页面, 比如点击页面的logo, 返回首页, 这时候就可以使用withRouter来做.
在这个例子中, 我将span使用withRouter作为一个可点击跳转的Link