How do I create v4 breadcrumbs-regenerators?

Question

How do I create v4 breadcrumbs-repeaters? I tried to ask this question on the V4 Jet Router website through a ticket request. They just said to see an example of recursive paths . I really want to create it in semantic-ui-react

Answer 1

I followed the same and your question directed me in the right direction.

This worked for me:

const Breadcrumbs = (props) => ( <div className="breadcrumbs"> <ul className='container'> <Route path='/:path' component={BreadcrumbsItem} /> </ul> </div> ) const BreadcrumbsItem = ({ match, ...rest }) => ( <span> <li className={match.isExact ? 'breadcrumb-active' : undefined}> <Link to={match.url || ''}> {match.url} </Link> </li> <Route path={'${match.url}/:path'} component={BreadcrumbsItem} /> </span> ) 

Answer 2

I used semantic-ui-react for my own project and did this to create breadcrumbs based on location.pathname ;

 export default (props) => { const paths = props.pathname.split('/').map((p, i, arr) => { if (i === 0) return { key: i, content: (<Link to={'/'}>home</Link>), active: (i === arr.length - 1), link: (i < arr.length - 1) }; if (i === arr.length - 1) return { key: i, content: p, active: (i === arr.length - 1) }; return { key: i, content: (<Link to={`${arr.slice(0, i + 1).join('/')}`}>{p}</Link>), active: (i === arr.length - 1), link: (i < arr.length - 1)} }; ); return <Breadcrumb icon='chevron right' sections={paths}/>; }; 

Answer 3

The problem with both of these approaches is that you are limited to using the path name in the palette chain; that is, you must bind your routing to the presentation names of your path.

Answer 4

This can be done using the HOC, which parses the pathname from the reactor router and returns matches with it. Although I'm a little more verbose, I think it gives more flexibility and a good readable array of objects for palette configuration.

Breadcrumbs.jsx

 import React from 'react'; import { NavLink } from 'react-router-dom'; import { withBreadcrumbs } from 'withBreadcrumbs'; const UserBreadcrumb = ({ match }) => <span>{match.params.userId}</span>; // use match param userId to fetch/display user name const routes = [ { path: 'users', breadcrumb: 'Users' }, { path: 'users/:userId', breadcrumb: UserBreadcrumb}, { path: 'something-else', breadcrumb: ':)' }, ]; const Breadcrumbs = ({ breadcrumbs }) => ( <div> {breadcrumbs.map(({ breadcrumb, path, match }) => ( <span key={path}> <NavLink to={match.url}> // wrap breadcrumb with semantic-ui element {breadcrumb} </NavLink> <span>/</span> </span> ))} </div> ); export default withBreadcrumbs(routes)(Breadcrumbs); 

withBreadcrumbs.js

 import React from 'react'; import { matchPath, withRouter } from 'react-router'; const renderer = ({ breadcrumb, match }) => { if (typeof breadcrumb === 'function') { return breadcrumb({ match }); } return breadcrumb; }; export const getBreadcrumbs = ({ routes, pathname }) => { const matches = []; pathname .replace(/\/$/, '') .split('/') .reduce((previous, current) => { const pathSection = `${previous}/${current}`; let breadcrumbMatch; routes.some(({ breadcrumb, path }) => { const match = matchPath(pathSection, { exact: true, path }); if (match) { breadcrumbMatch = { breadcrumb: renderer({ breadcrumb, match }), path, match, }; return true; } return false; }); if (breadcrumbMatch) { matches.push(breadcrumbMatch); } return pathSection; }); return matches; }; export const withBreadcrumbs = routes => Component => withRouter(props => ( <Component {...props} breadcrumbs={ getBreadcrumbs({ pathname: props.location.pathname, routes, }) } /> )); 

An open source HOC is also available here: https://github.com/icd2k3/react-router-breadcrumbs-hoc

Answer 5

Try this simple solution:

 const Breadcrumbs = ({ ...rest, match }) => ( <span> <Link to={match.url || ''} className={match.isExact ? 'breadcrumb active' : 'breadcrumb'}> {match.url.substr(match.url.lastIndexOf('/')+1, match.url.length)} </Link> <Route path={`${match.url}/:path`} component={Breadcrumbs} /> </span> ) 

Your css:

 .breadcrumbs { background: #fff; margin-bottom: 15px; } .breadcrumb { margin-bottom: 0; line-height: 2.5; display: inline-block; } .breadcrumb::before { display: inline-block; padding-right: 5px; padding-left: 5px; color: #818a91; content: "/"; } .breadcrumb.active { color: #818a91; } 

Then use it as follows:

 <div className="container-fluid breadcrumbs"> <Route path='/:path' component={Breadcrumbs} /> </div> 

Happy coding!

Answer 6

From react-router doc: <Route> componentens displays some of your components when the location matches the route path, like this:

 <Route path={`${match.url}/:topicId`} component={Topic}/> 

The primary responsibility for the information is left to the provided component, which in this case is <Topic> . He knows how to retrieve data or has already bound the state of reduction and so on. So, <Topic> simple instance of itembulbums agents and pass the necessary data to it as follows:

 import {BreadcrumbsItem} from 'react-breadcrumbs-dynamic' const Topic = ({ match, topic }) => ( <div> <h3> {topic.title} </h3> <BreadcrumbsItem to={`${match.url}/${match.params.topicId}`}> {topic.title} </BreadcrumbsItem> ... </div> ) 

It's all. A more complete example is in this answer . Here's a live demo .

Answer 7

Here's a solution that provides a single source of truth for nested navigation and breadcrumbs.

An example application is available on GitHub: https://github.com/sneas/react-nested-routes-example

Demo: https://sneas.imtqy.com/react-nested-routes-example/

Navigation Configuration:

 export const navigation = [ { path: "/", label: "All categories", content: () => <AllCategories />, routes: [ { path: "/electronics", label: "Electronics", content: () => <Electronics />, routes: [ { path: "/accessories", label: "Accessories", content: () => <Accessories />, routes: [ { path: "/usb-cables", label: "USB cables", content: () => <UsbCables /> } ] }, { path: "/headphones", label: "Headphones", content: () => <Headphones /> } ] } ] } ]; 

We need to recursively smooth the navigation and display it as a flat array:

 const routes = flattenRoutes(navigation); return (<Router> {routes.map((route, index) => ( <Route key={index} path={route.path} render={() => rouete.content} ></Route> ))} </Router>); 

Then create breadcrumbs from the same navigation structure.