React Router Utility Belt

Opinionated react-router UI components with unopinionated styling!

Helps solve some common real world navigation concerns with React Router, like:

• :gem: Single "source of truth" for route defintions to prevent multiple nav components repeating data
• :+1: Drawer navigation with automatic grouping and filtering
• :zap: Sub navigation generation
• :bread: Automatic breadcrumb generation
• :open_mouth: Render current route information outside your main Route declaration

This example focuses purely on react router concepts. Libraries like connected react router are great but the goal of this project is to allow you to implement React Router without any add on dependencies.

No other 3rd party packages are used so you can reason about what's going on without extra mental tax.

Design Notes

• :gift: Built with Create React App
• :trophy: Best practices React.js
• :memo: Function components throughout, along with hooks

Requirements

• :book: React v16.8+
• :pencil2: AirBNB's ESLint rules applied

Install

To run the demo, git clone and run npm install in both the root and the demo folder which is a stand alone CRA app.

Run npm run demo in the root to launch the demo app.

Walkthrough Video

Watch this video is see it in action and learn how to implement in your projects: