How do I create react-router v4 breadcrumbs?

Question

How do I create react-router v4 breadcrumbs? I tried asking this question on the react-router V4 website via an issue ticket. They just said to see the recursive paths example. I really want to create it in semantic-ui-react

Answer 1

I was after the same thing and your question pointed 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 }) => (     <React.Fragment>         <li className={match.isExact ? 'breadcrumb-active' : undefined}>             <Link to={match.url || ''}>                 {match.url}             </Link>         </li>         <Route path={`${match.url}/:path`} component={BreadcrumbsItem} />     </React.Fragment> ) 

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}/>; };