Routing Template (JavaScript)

This is an official PX Blue template for use with the Create React App CLI. It is also used internally by the PX Blue 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 PX Blue React Component Library.

Usage

This template can be used with Create React App:

npx create-react-app myapp --template @pxblue/routing

or using the PX Blue CLI:

npx -p @pxblue/cli pxb new react --name=myapp --language=js --template=routing

Project Structure

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

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