How do I create react-router v4 breadcrumbs?

react-router-v4
Monty picture Monty · Feb 22, 2017 · Viewed 23.2k times · Source

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

Felipe Taboada picture Felipe Taboada · Mar 13, 2017

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>
)

Related questions

How to push to History in React Router v4?

In the current version of React Router (v3) I can accept a server response and use browserHistory.push to go to the appropriate response page. However, this isn't available in v4, and I'm not sure what the appropriate way to …

Read More
Programmatically navigate using react router V4

I have just replaced react-router from v3 to v4. But I am not sure how to programmatically navigate in the member function of a Component. i.e in handleClick() function I want to navigate to /path/some/where after processing …

Read More
React Router v4 - How to get current route?

I'd like to display a title in <AppBar /> that is somehow passed in from the current route. In React Router v4, how would <AppBar /> be able to get the current route passed into it's title prop? &…

Read More