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

Improving Formik Performance when it's Slow (Material UI)

Including Files and Deeply Directories in Rust

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

Make resilience your competitive advantage

Simple Breadcrumbs in React with Reach-Router [Tutorial]

Simple Breadcrumbs in React with Reach-Router [Tutorial]

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

How to Create a Monorepo With Vite, Cloudflare, Remix, PNPM and Turborepo (No Build Step)

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

How to Create a Monorepo With Vite, Cloudflare, Remix, PNPM and Turborepo (No Build Step)

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps