Routing

The Router in React is used to create Single Page Web Applications.

In Hybrix we have added Routing in Routes folder, which you can find at src/Routes/allRoutes.tsx file.

We have also added Authmiddleware in src/Routes/AuthProtected.tsx file, to handle redirection for non-auth users. you can also handle roles based routing, redirections, set accessToken here as per your need.

Note :- All private & public routes are rendered in src/App.tsx file.

How to add new route ?

You can easily add, change or remove any route by simply making changes described below:

1. Open src/Routes/allRoutes.tsx file, declare your component. E.g.

import newPage from "../pages/newPage"

2. And make sure to add the entry for same with path and other properties like path and component same as other routes declared there. if your page is a public page (with blank layout), then add the route in publicRoutes, and if your page is a private page (with full layout) then add route in authProtectedRoutes. E.g.

{ path: "/new-page", component: <newPage />  }

Each of these properties are explained below:

path : Url relative path
component : Actual component name which would get rendered when user visits the path

Note : you don't need to restart the development server in order to see the menu changes getting in effect