Routing Template (TypeScript)

This is an official Brightlayer UI template for use with the Create React App CLI. It is also used internally by the Brightlayer UI CLI.

This template includes the installation and initial setup of routing using React Router. It includes several placeholder routes/screens and a Drawer navigator from the Brightlayer UI React Component Library.

Usage

This template can be used with Create React App:

npx create-react-app myapp --template @brightlayer-ui/routing-typescript

or using the Brightlayer UI CLI:

npx -p @brightlayer-ui/cli blui new react --name=myapp --language=ts --template=routing

Project Structure

Projects created using this template will start out with the following file structure:

└── /src
    |── index.tsx                           // the root file that renders the application (Theme Provider, Router, & CSS Baseline styles)
    |── App.tsx                             // sets up the DrawerLayout component
    |── /components                           
    │   └── Logo.tsx                        // BLUI spinning logo graphic
    |── /contexts                           
    │   └── drawerContextProvider.tsx       // creates a Context to allow pages to open/close the navigation drawer
    |── /pages                              // sample application pages
    └── /router
        |── drawer.tsx                      // the contents of the navigation drawer
        |── main.tsx                        // React Router route configuration
        └── routes.tsx                      // route definitions for use in the Router