react-router-with-breadcrumbs v1.0.1

react-router-with-breadcrumbs

import React from "react";
import { BrowserRouter as Router, Link } from "react-router-dom";
import { Route, withBreadcrumbs } from "react-router-with-breadcrumbs";

const Crumbs = ({ breadcrumbs }) => {
   return (
      <div>
         {breadcrumbs.map((crumb, index) => {
            return (
               <div key={index}>
                  <Link to={crumb.url}>{crumb.name}</Link>
               </div>
            );
         })}
      </div>
   );
};

const Breadcrumbs = withBreadcrumbs(Crumbs);

const Home = () => <h1>Home</h1>;
const Page1 = () => <h1>Page1</h1>;
const Page2 = () => <h1>Page2</h1>;
const Page3 = () => <h1>Page3</h1>;

const Example = () => (
   <Router>
      <div>
         <Breadcrumbs />
         <Route exact path="/" component={Home} />
         <Route exact path="/slug1" component={Page1} />
         <Route exact path="/slug1/slug2" component={Page1} />
         <Route exact path="/slug1/slug2/slug3" component={Page3} />
      </div>
   </Router>
);