Routing

Routing is the process of showing different screens and components at different URL paths /home, /customers, etc. We use react-router in the app. This package abstracts the mapping of routes in the app. In addition to React Router, the project includes extra components built on top React Router to better fit the project needs. Below, you can find the various components used in the routing of the app. In addition, you can find React Router documentation here.

App.tsx

App.tsx is one of the highest level components in our app. It describes the various routes in the app and sets up the components needed for the routing.

Container

Wrapper for the majority of the routes/pages in the application. It lists out the various the various routes, their links, and their corresponding component via the AuthenticatedRoute component. More info on AuthenticatedRoute below.

<AuthenticatedRoute path="/customers" component={CustomerMain} exact />

In addition, container also displays BaseNavigation.tsx. This component displays the bottom navigation bar used throughout the app. More info below.

Return

The return function sets up the general structure for the routing along with some non-authenticated routes.

ConnectedRouter

We use a ConnectedRouter instead of a regular Router so that our routing information is synced with Redux. This enables us to maintain a synced screen history with Redux and allows us to access route information (like what page the user is on) on a screen that is not managed by the router. This functions identically to the normal Router component as described in the react-router docs.

AuthenticatedRoute.jsx

The AuthenticatedRoute is a wrapper component over the standard Route component in react-router. It ensures that the user is logged in to view a page, if not they are redirected to the login page. It takes 5 props: isLoading, isSignedIn, path, component, and exact. path, component, and exact are passed onto the regular Route component. exact is conditional and defaults to false. While isLoading and isSignedIn are pulled in from Redux.

BaseNavigation.jsx

BaseNavigation, as mentioned above, displays the primary bottom navigation bar for the app. It uses Material-UI bottomNavigation components. Documentation can be found here.

Linking different screens

The navigation between different screens is made possible via the Link component of react-router. Once a route has been described in App.tsx as described earlier. Creating a link component and setting its to prop to a corresponding route will enable the changing of screens. Example below:

 <Link to={'/customers'}>
          <HomeMenuItem
            label="To Meter"
            amount={numCustomersToMeter}
            iconType="meter"
          />
        </Link>

Here the Link component's to prop is set to the route /customers. It wraps over the HomeMenuItem component, so when that specific HomeMenuItem is pressed, the Link component prompts a route/screen change.

Credit to People Power documentation.