您现在的位置是:首页>学习分享
react withRouter 2019-06-20 554

高阶组件中的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, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import { Menu } from 'antd';
import { HomeOutlinedSettingOutlinedPieChartOutlinedDesktopOutlinedContainerOutlinedTeamOutlinedForkOutlined } from '@ant-design/icons';
import './index.scss';

class LeftMenu extends Component {

  constructor(props) {
    super(props);
    this.state = {
      collapsed: false,
      menuConfig: [
        { name: '后台首页'icon: <HomeOutlined />route: '/index', },
        { name: '网站设置'icon: <SettingOutlined />route: '', },
        { name: '新建文章'icon: <PieChartOutlined />route: '', },
        { name: '文章管理'icon: <DesktopOutlined />route: '', },
        { name: '用户管理'icon: <TeamOutlined />route: '', },
        { name: '主题管理'icon: <ContainerOutlined />route: '', },
        { name: '友链管理'icon: <ForkOutlined />route: '/blogroll', }
      ]
    }
  }

  toggleCollapsed = () => {
    const { collapsed } = this.state
    this.setState({
      collapsed: !collapsed,
    })
  }

  goRoute = (route=> {
    this.props.history.push(route)
  }

  render() {
    const { collapsedmenuConfig } = this.state
      , { toggleCollapsedgoRoute } = this
    return (
      <div className="left-menu">
        <div className="control" onClick={ toggleCollapsed }>
          <img src={ require('../../assets/img/logo.png'} alt="" className="logo"/>
        </div>
        <Menu mode="inline" inlineCollapsed={ collapsed } >
          {menuConfig.map((itemindex=> {
            return <Menu.Item key={ index } icon={ item.icon } onClick={ () => goRoute(item.route}>
              { item.name }
            </Menu.Item>
          })}
        </Menu>
      </div>
    )
  }
}

export default withRouter(LeftMenu);
所以withRouter的作用就是, 如果我们某个东西不是一个Router, 但是我们要依靠它去跳转一个页面, 比如点击页面的logo, 返回首页, 这时候就可以使用withRouter来做.
在这个例子中, 我将span使用withRouter作为一个可点击跳转的Link
文章评论
小程序端
  • 微信公众号
  • 我的微信

Copyright © www.zhangqingblog.com All Rights Reserved.

备案号:鄂ICP备18005731号-2