记录一次withRouter的实际应用场景

在项目中经常会使用到面包屑，

所以想结合antDesign里面的Breadcrumb做一次封装

封装后的面包屑能完成路由的跳转

但是作为独立的组件  Breadcrumb是拿不到路由信息的

如果每次在页面组件去传递又略显麻烦

所以在React-router的官网中，找到了React Router中提供的withRouter方法

withRouter的作用有点类似于Redux中的connect，把要获取路由信息的组件传入with-Router，withRouter会把路由信息传递给该组件，并会返回一个新的组件，来方便其他地方调用

import React, { ReactNode } from 'react';
import { Breadcrumb } from 'antd';
import { Link ,HashRouter,withRouter} from 'react-router-dom';

const BreadcrumbCustom = (props) => {
    const { breads } = props;
    const firstPageBtn = (props)=>{
      let { history } = props;
      console.log('history=========>',history);
      return(
         <span onClick={()=>{history.goBack()}}>首页</span>
      )
    };
    const FirstPageBtn = withRouter(firstPageBtn);
    console.log('FirstPageBtn=========>',FirstPageBtn)
    return (
        <Breadcrumb style={{ margin: '12px 0' }}>
            <Breadcrumb.Item>
                <FirstPageBtn/>
            </Breadcrumb.Item>
            {breads.map((bread, i) => (
                <Breadcrumb.Item key={i}>{bread}</Breadcrumb.Item>
            ))}
        </Breadcrumb>
    );
};

export default BreadcrumbCustom;

import React from "react";
import BreadcrumbCustom from "../../../components/BreadcrumbCustom/BreadcrumbCustom";

const ReactTech = (props)=>{
    console.log(props)
    return (
        <div className='ReactTech'>
            <BreadcrumbCustom breads={['技术','react']}/>
            ReactTech
        </div>
    )
};
export default ReactTech;

 

 尽管这样做，已经实现了点击首页能跳转；

但是将来出现四级，五级页面的时候，就需要做到点击任何一个面包屑都能实现路由跳转

于是我想把history传到外面来，于是改进一下代码
 

const BreadcrumbCustom = (props) => {
    const [History,setHistory] = useState(null);
    const { breads } = props;
    const firstPageBtn = (props)=>{
      let { history } = props;
        setHistory(history);
      console.log('history=========>',history);
      return(
         <span onClick={()=>{history.goBack()}}>首页</span>
      )
    };
    const FirstPageBtn = withRouter(firstPageBtn);
    console.log('FirstPageBtn=========>',FirstPageBtn)
    return (
        <Breadcrumb style={{ margin: '12px 0' }}>
            <Breadcrumb.Item>
                <FirstPageBtn/>
            </Breadcrumb.Item>
            {breads.map((bread, i) => (
                <Breadcrumb.Item key={i} onClick={()=>{History.push('/business$/richText')}}>{bread}</Breadcrumb.Item>
            ))}
        </Breadcrumb>
    );
};

但是这个方法似乎不太高级，所以我觉得用Hook来试试：

Router 5.x中新增加了Router Hooks

1）useHistory调用该Hook会返回history对象。

2）useLocation调用该Hook会返回location对象。

3）useRouteMatch调用该Hook会返回match对象。

4）useParams调用该Hook会返回match对象中的params，也就是path传递的参数。

import React, {ReactNode, useState} from 'react';
import { Breadcrumb } from 'antd';
import { Link ,HashRouter,withRouter,useHistory} from 'react-router-dom';


const BreadcrumbCustom = (props) => {
    const History = useHistory();
    const { breads } = props;
    const firstPageBtn = (props)=>{
      let { history } = props;
      console.log('history=========>',history);
      return(
         <span onClick={()=>{history.goBack()}}>首页</span>
      )
    };
    const FirstPageBtn = withRouter(firstPageBtn);
    console.log('FirstPageBtn=========>',FirstPageBtn)
    return (
        <Breadcrumb style={{ margin: '12px 0' }}>
            <Breadcrumb.Item>
                <FirstPageBtn/>
            </Breadcrumb.Item>
            {breads.map((bread, i) => (
                <Breadcrumb.Item key={i} onClick={()=>{History.push('/business$/richText')}}>{bread}</Breadcrumb.Item>
            ))}
        </Breadcrumb>
    );
};

export default BreadcrumbCustom;