Routing

1. Implementation#

• Uko uses react-router and react-router-dom.
• All the routes are imported from src/routes in app.tsx.

app.tsx

import { routes } from './routes'

const App: React.FC = () => {
  const allPages = useRoutes(routes);

  return (
    <BrowserRouter>
      <Routes>{allPages}</Routes>
    </BrowserRouter>
  )
}

Routes file#

src/routes.tsx

// Dashboard page
const DashboardLayout = Loadable(lazy(() => import("../Layouts/DashboardLayout")));

// authentication pages
const Login = Loadable(lazy(() => import("../pages/authentication/login")));
const Register = Loadable(lazy(() => import("../pages/authentication/register")));


// routes
export const routes = [
  {
    path: "/",
    element: <DashboardLayout />,
    children: [
        // All the pages of dashboard layout
    ]
  },
  {
    path: "/session/signin",
    element: <Login />,
  },
  {
    path: "/session/signup",
    element: <Register />,
  },
  {
    path: "*",
    element: <ErrorPage />,
  },
];

2. Using Auth or Guest Guard?#

// guest guard routes
const routes = [
  {
    path: 'login',
    element: (
      <GuestGuard>
        <Login />
      </GuestGuard>
    ),
  },
  {
    path: 'register',
    element: (
      <GuestGuard>
        <Register />
      </GuestGuard>
    ),
  },
]

// ---------------------------------------------------

// auth guard routes
const routes = [
  {
    path: 'dashboard',
    element: (
      <AuthGuard>
        <DashboardLayout />
      </AuthGuard>
    ),
    children: [
      {
        path: '',
        element: <DashboardSaaS />,
      },
      {
        path: 'sales',
        element: <DashboardSales />,
      },
    ],
  },
]