use variable for app routes

src/Router.tsx

@@ -12,38 +12,45 @@ type RouteConfig = {
   exact?: boolean;
 };
 
+export const AppRoutes = {
+  home: '/',
+  bills: '/bills',
+  reports: '/reports',
+  catchAll: '*'
+};
+
 export default function Router() {
   const routes: RouteConfig[] = [
     // Home
     {
-      path: '/',
+      path: AppRoutes.home,
       component: HomePage,
       exact: true
     },
     // Bills
     {
-      path: '/bills/new',
+      path: `${AppRoutes.bills}/new`,
       component: NewBillPage,
       exact: true
     },
     {
-      path: '/bills',
+      path: AppRoutes.bills,
       component: BillsPage,
       exact: true
     },
     {
-      path: '/bills/:id',
+      path: `${AppRoutes.bills}/:id`,
       component: BillPage
     },
     //  Reports
     {
-      path: '/reports',
+      path: AppRoutes.reports,
       component: ReportPage,
       exact: true
     },
     // … rest
     {
-      path: '*',
+      path: AppRoutes.catchAll,
       component: NotFoundPage
     }
   ];

src/layouts/main.tsx

@@ -1,5 +1,6 @@
 import { Layout, Menu, Row } from 'antd';
 import { Link, useRouteMatch } from 'react-router-dom';
+import { AppRoutes } from '../Router';
 
 const { Header, Content, Footer } = Layout;
 
@@ -8,8 +9,9 @@ export const withLayout =
   ({ ...props }: any) => {
     const { url } = useRouteMatch();
     const menuItems = [
-      { label: 'Home', path: '/' },
+      { label: 'Home', path: AppRoutes.home },
-      { label: 'Bills', path: '/bills' }
+      { label: 'Bills', path: AppRoutes.bills },
+      { label: 'Reports', path: AppRoutes.reports }
     ];
 
     return (