Application Pages

Learn how to create and manage application pages in your Makerkit app

Now that we have some components to display, we need to add them to the actual Remix pages.

If you have not created the files in the Routing section above, it's time to do it.

Using the components AppHeader and AppContainer

These components are used to wrap the content of the pages. They are responsible for displaying the header and the container of the page.

tsx

function DashboardPage() {
  return (
    <>
      <AppHeader>
        <span className={'flex space-x-2'}>
          <Squares2X2Icon className="w-6" />
          <span>
            <Trans i18nKey={'common:dashboardTabLabel'} />
          </span>
        </span>
      </AppHeader>
      <AppContainer>
        Your content goes here
      </AppContainer>
    </>
  );
}

Guarding Application Pages for Authenticated Users

One of the ways we can use to protect application pages, we can use the requireSession function. This function also verifies that the user is authenticated using MFA.

tsx

import { redirect } from "@remix-run/node";
export async function loader() {
  const session = await requireSession();
  if (!session) {
    return redirect("/auth/sign-in");
  }
  return {
    session,
  };
}

Using Dynamic Parameters

Every page and layout can access dynamic parameters from the URL.

For example, if you have a page with the following URL:

text

https://myapp.com/dashboard/[organization]/[project]

You can access the organization and project parameters from the page's loader function.

tsx

import type { LoaderArgs } from '@remix-run/node';
export async function loader(args: LoaderArgs) {
  const organization = args.params.organization;
  const project = args.params.project;
  // ...
}

Using Search Parameters

Similarly to dynamic parameters, you can also access search parameters from the URL.

For example, if you have a page with the following URL:

text

https://myapp.com/dashboard/[organization]/[project]?page=1&limit=10

You can access the page and limit parameters from the page's loader function.

tsx

import type { LoaderArgs } from '@remix-run/node';
export async function loader(args: LoaderArgs) {
  const params = new URL(args.request.url).searchParams;
  const page = params.get('page');
  const limit = params.get('limit');
  // ...
}

function DashboardPage() { return ( <> <AppHeader> <span className={'flex space-x-2'}> <Squares2X2Icon className="w-6" /> <span> <Trans i18nKey={'common:dashboardTabLabel'} /> </span> </span> </AppHeader> <AppContainer> Your content goes here </AppContainer> </> ); }

Guarding Application Pages for Authenticated Users

One of the ways we can use to protect application pages, we can use the requireSession function. This function also verifies that the user is authenticated using MFA.

tsx

import { redirect } from "@remix-run/node";
export async function loader() {
  const session = await requireSession();
  if (!session) {
    return redirect("/auth/sign-in");
  }
  return {
    session,
  };
}

Using Dynamic Parameters

Every page and layout can access dynamic parameters from the URL.

For example, if you have a page with the following URL:

text

https://myapp.com/dashboard/[organization]/[project]

You can access the organization and project parameters from the page's loader function.

tsx

import type { LoaderArgs } from '@remix-run/node';
export async function loader(args: LoaderArgs) {
  const organization = args.params.organization;
  const project = args.params.project;
  // ...
}

Using Search Parameters

Similarly to dynamic parameters, you can also access search parameters from the URL.

For example, if you have a page with the following URL:

text

https://myapp.com/dashboard/[organization]/[project]?page=1&limit=10

You can access the page and limit parameters from the page's loader function.

tsx

import type { LoaderArgs } from '@remix-run/node';
export async function loader(args: LoaderArgs) {
  const params = new URL(args.request.url).searchParams;
  const page = params.get('page');
  const limit = params.get('limit');
  // ...
}