One of the things that you end up developing in one point or in the other is a breadcrumbs navigation system. I've seen some posts across the web touting how to achieve it in React and Reach Router by providing complex looping mechanisms. In this post, I show you a simpler, non loop way that displays breadcrumbs in Reach-Router. I'll be using CSS-In-JS (Not required), React 16.13 (could be lower), TypeScript, and Reach-Router 1.3.x. No hooks are needed, but components are functional. Here's all the code that you'll need. type BreadrumbsProps = { : string;
    text: string;
    className?: string;
  }; useStyles = makeStyles( ({ : { : ,
    }, : { : ,
    }, : { : ,
    }, : { : ,
    }, : { : ,
    },
  })); AppBreadcrumbs: React.FC<RouteComponentProps> = memo( { styles = useStyles(); ( <Router primary={false}>
          <Bread path="/" url={'/'} text={'Home'} className={styles.left}>
            <Bread
              path={"/evaluation"}
              url={"/evaluation"}
              text={'Evaluation'}
            >
              <Bread
                path="instruments"
                url={'/evaluation/instruments'}
                text={'Instruments'}
              >
                <Bread
                  path=":classId/:period/:instrument/*"
                  url={'../'}
                  text={'Period'}
                ></Bread>
              </Bread>
              <Bread
                path="indicators"
                url={'/evaluation/indicators'}
                text={'Indicators'}
              ></Bread>
            </Bread>
            <Bread
              path={"/planning" + '/*'}
              url={"/planning"}
              text={'Indicators'}
            ></Bread>
            <Bread
              path={"/attendance" + '/*'}
              url={"/attendance"}
              text={'Asistencia'}
            ></Bread>
            <Bread
              path={"/scores" + '/*'}
              url={"/scores"}
              text={'Calificaciones'}
            ></Bread>
            <Bread
              path={"/content" + '/*'}
              url={"/content"}
              text={'Contenido de Clases'}
            ></Bread>
          </Bread>
        </Router> <div className={styles.clear} />
      </>
    );
  });
  
  export default AppBreadcrumbs;
  
  const Bread: React.FC<RouteComponentProps & BreadrumbsProps> = memo((props) => {
    const styles = useStyles();
    const shouldRenderCrumb = !props.location?.pathname.endsWith(
      props.path || '',
    );
    return (
      <div className={props.className}>
        <LinkButton size="small" variant="text" to={props.url}>
          {props.text}
        </LinkButton>
        {shouldRenderCrumb && React.Children.count(props.children) > 0 && (
          <div className={cls(styles.right)}>
            <div className={cls(styles.left, styles.separator)}>{'>'}</div>
  
            <div className={styles.left}>{props.children}</div>
          </div>
        )}
      </div>
    );
  }); url // This is material-ui. You can use any CSS-In-JS approach. const => () root display 'block' right float 'right' left float 'left' clear clear 'both' separator padding '6px' export const ( ) => props const return <> You define all of the crumbs inside the component as if it were normal routes. AppBreadcrumbs Here's an example (Sorry it's in Spanish - It's an actual application that we've been working in) Let's break it down: Reach-Router allows us to have as many Routers as we'd like. By specifying it with we instruct Reach-router not to use the router for main navigation, this allows us to display the inner content of the router. <Router primary={false}> ... </Router> We also need to create an additional component, which we will be calling it because we need to: <Bread/> Format its content. Reach-router creates all of the inner routes as children wrapped in s. We need to do some CSS to make them all float next to each other. <div> Prevent Reach-Router from complaining. Any direct children inside the which doesn't have a path attribute will cause Reach-Router to throw an error. <Router></Router> Designing the <Bread> component Bread: React.FC<RouteComponentProps & BreadrumbsProps> = memo( { styles = useStyles(); shouldRenderCrumb = !props.location?.pathname.endsWith(
      props.path || ,
    ); ( <LinkButton size="small" variant="text" to={props.url}>
          {props.text}
        </LinkButton> <div className={cls(styles.right)}>
            <div className={cls(styles.left, styles.separator)}>{'>'}</div>
  
            <div className={styles.left}>{props.children}</div>
          </div> );
  }); const ( ) => props const const '' return < = > div className {props.className} {shouldRenderCrumb && React.Children.count(props.children) > 0 && ( )} </ > div Its CSS useStyles = makeStyles( ({ : { : ,
    }, : { : ,
    }, : { : ,
    }, : { : ,
    }, : { : ,
    },
  })); const => () root display 'block' right float 'right' left float 'left' clear clear 'both' separator padding '6px' Note that the it's just a component that wraps it in an and tags. <LinkButton> <a> <button> Nothing out of the extraordinary happens here. We overcome the limitation of the children in Reach Router by passing its text as props and rendering it into the component. We also dynamically render the crumb separator or marking (In this case it's just an amersand ) by checking whether it doesn't have more children in it, and if the path is successfully matched. > Clearing div We add a with a css property at the very end to prevent elements from stepping next to it. <div> clear:both Some notes in the route Only use on the route's path if there's no more children, and you'd like for the route to be displayed in all of its descendants (See and .) /* /content /scores Do not add at the end of the route's path if you have children. (see the route) /* /evaluations That's it! Follow me on Instagram, TikTok, Snapchat, Twitter, Facebook @josejaviasilis.

Facebook

Instagram

Twitter

2022 - HackerNoon Contributor of the Year - Performance

2022 - HackerNoon Contributor of the Year - Typescript

Follow me on Twitter and LinkedIn for more information

Nominated for 2022 - HackerNoon Contributor of the Year - Typescript

Nominated for 2022 - HackerNoon Contributor of the Year - Performance

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Simple Breadcrumbs in React with Reach-Router [Tutorial]

Simple Breadcrumbs in React with Reach-Router [Tutorial]

Too Long; Didn't Read

Companies Mentioned

Jose Javi Asilis

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Simple Breadcrumbs in React with Reach-Router [Tutorial]

Too Long; Didn't Read

Companies Mentioned

Jose Javi Asilis

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES