current position:Home>React bread crumbs

React bread crumbs

2022-04-29 05:44:41Game programming

// The routing is shown below

 1 const Routers = [ 2     { 3         name: ' Business acceptance ', 4         breadcrumb: ' Business acceptance ', 5         path: '/', 6         redirect: '/identification', 7         component: Identification, 8         exact: true, 9     },10     {11         name: ' Application for identification ',12         breadcrumb: ' Application for identification ',13         path: '/identification',14         component: Identification,15         exact: true,16     },17     {18         name: ' ID Application Details ',19         path: '/identification/:id',20         component: IdentificationDetail,21         exact: true,22     },23     {24         name: ' Application for business qualification certificate ',25         breadcrumb: ' Application for business qualification certificate ',26         path: '/qualification',27         component: Identification,28         exact: true,29     },30     {31         name: ' Business qualification certificate application details ',32         path: '/qualification/:name',33         component: QualificationDetail,34         exact: true,35     },36     {37         name: ' Professional investors identify ',38         breadcrumb: ' Professional investors identify ',39         path: '/investor',40         component: Identification,41         exact: true,42     },43     {44         name: ' Identification details of professional investors ',45         path: '/investor/:name',46         component: InvestorDetail,47         exact: true,48     },49     {50         name: ' Application for identification ',51         breadcrumb: ' Application for identification ',52         path: '/*',53         redirect: '/identification',54         exact: true,55     },56 57 ]
 1 const getBreadcrumbs = ({ flattenRoutes, location }) => { 2     //  Initialize the matching array match 3     let matches = []; 4  5     location.pathname 6         //  Get pathname , Then divide the path into each routing part . 7         .split('?')[0] 8         .split('/') 9         //  Make a call to each part `getBreadcrumb()` Of reduce.10         .reduce((prev, curSection) => {11             //  Merge the last routing part with the current part , For example, when the path is  `/x/xx/xxx`  when ,pathSection Check separately  `/x` `/x/xx` `/x/xx/xxx`  The matching of , And generate bread crumbs 12             const pathSection = `${prev}/${curSection}`;13             const breadcrumb = getBreadcrumb({14                 flattenRoutes,15                 curSection,16                 pathSection,17             });18 19             //  Introduce bread crumbs into matches Array 20             matches.push(breadcrumb);21 22             //  Pass on to the next reduce The path part of 23             return pathSection;24         });25     return matches;26 };27 const getBreadcrumb = ({ flattenRoutes, curSection, pathSection }) => {28     const matchRoute = flattenRoutes.find(ele => {29         const { path } = ele;30         // exact  by  react router4  Properties of , Used to accurately match routes 31         return matchPath(pathSection, { path, exact: true });32     });33     //  return breadcrumb Value , If not, return the original matching sub pathname 34     if (matchRoute) {35         return {36             content: matchRoute.breadcrumb || decodeURI(curSection),37             path: matchRoute.path,38         };39     }40     //  about routes Path that does not exist in the table 41     //  The default name of the root directory is home page .42     return {43         content: pathSection === '/' ? ' Business acceptance ' : curSection,44         path: pathSection,45     };46 };47 48 const routerList = getBreadcrumbs({ flattenRoutes: Routers, location: props.location})

author :C , c

Game programming ️, A game development favorite ~

If the picture is not displayed for a long time , Please use Chrome Kernel browser .

copyright notice
author[Game programming],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/116/202204261029495075.html

Random recommended