在項(xiàng)目中經(jīng)常會(huì)使用到面包屑，

所以想結(jié)合antDesign里面的Breadcrumb做一次封裝

封裝后的面包屑能完成路由的跳轉(zhuǎn)

但是作為獨(dú)立的組件??Breadcrumb是拿不到路由信息的

如果每次在頁(yè)面組件去傳遞又略顯麻煩

所以在React-router的官網(wǎng)中，找到了React Router中提供的withRouter方法

withRouter的作用有點(diǎn)類似于Redux中的connect，把要獲取路由信息的組件傳入with-Router，withRouter會(huì)把路由信息傳遞給該組件，并會(huì)返回一個(gè)新的組件，來(lái)方便其他地方調(diào)用

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()}}>首頁(yè)</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={['技術(shù)','react']}/>ReactTech</div>) }; export default ReactTech;

?

?盡管這樣做，已經(jīng)實(shí)現(xiàn)了點(diǎn)擊首頁(yè)能跳轉(zhuǎn)；

但是將來(lái)出現(xiàn)四級(jí)，五級(jí)頁(yè)面的時(shí)候，就需要做到點(diǎn)擊任何一個(gè)面包屑都能實(shí)現(xiàn)路由跳轉(zhuǎn)

于是我想把history傳到外面來(lái)，于是改進(jìn)一下代碼
?

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()}}>首頁(yè)</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>); };

但是這個(gè)方法似乎不太高級(jí)，所以我覺(jué)得用Hook來(lái)試試：

Router 5.x中新增加了Router Hooks

1）useHistory調(diào)用該Hook會(huì)返回history對(duì)象。

2）useLocation調(diào)用該Hook會(huì)返回location對(duì)象。

3）useRouteMatch調(diào)用該Hook會(huì)返回match對(duì)象。

4）useParams調(diào)用該Hook會(huì)返回match對(duì)象中的params，也就是path傳遞的參數(shù)。

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()}}>首頁(yè)</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;

?

?

?

總結(jié)

以上是生活随笔為你收集整理的记录一次withRouter的实际应用场景的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。