在項目中經常會使用到面包屑，

所以想結合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;

?

?

?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。