---
sidebar_position: 4
title: Add button
---

In order to access your add page, we are going to add a button above our grid.

Open the `Pages/List.razor` file and add the highlighted changes:

```cshtml title="Pages/List.razor"
@page "/list"
@using MyBeautifulAdmin.Models

<h3>List</h3>

// highlight-start
<div>
    <NavLink class="btn btn-primary" href="Add" Match="NavLinkMatch.All">
        <i class="fa fa-plus"></i> Ajouter
    </NavLink>
</div>
// highlight-end

<DataGrid TItem="Data"
          Data="@data"
          ReadData="@OnReadData"
          TotalItems="@totalData"
          PageSize="10"
          ShowPager
          Responsive>
    <DataGridColumn TItem="Data" Field="@nameof(Data.Id)" Caption="#" />
    <DataGridColumn TItem="Data" Field="@nameof(Data.FirstName)" Caption="First Name" />
    <DataGridColumn TItem="Data" Field="@nameof(Data.LastName)" Caption="Last Name" />
    <DataGridColumn TItem="Data" Field="@nameof(Data.DateOfBirth)" Caption="Date Of Birth" DisplayFormat="{0:d}" DisplayFormatProvider="@System.Globalization.CultureInfo.GetCultureInfo("fr-FR")" />
    <DataGridColumn TItem="Data" Field="@nameof(Data.Roles)" Caption="Roles">
        <DisplayTemplate>
            @(string.Join(", ", ((Data)context).Roles))
        </DisplayTemplate>
    </DataGridColumn>
</DataGrid>
```

## Concept: Routing

### Routing patterns

The `Router` component allows routing to Razor components in a Blazor application. The `Router` component is used in the `App` component of Blazor apps.

```cshtml title="App.razor"
<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <p>Sorry, there's nothing at this address.</p>
    </NotFound>
</Router>
```

When a Razor component (`.razor`) with an `@page` directive is compiled, the generated component class is supplied as a RouteAttribute specifying the component's routing model.

When the app starts, the assembly specified as the `AppAssembly` router is scanned to collect routing information for app components that have a RouteAttribute .

At runtime, the RouteView component:
* Receives all route parameters from the RouteData Router.
* Renders the specified component with its layout, including additional nested layouts.

Components support multiple routing patterns using multiple `@page` directives.

The following sample component loads on requests for `/BlazorRoute` and `/DifferentBlazorRoute`.

```cshtml title="Pages/BlazorRoute.razor"
// highlight-start
@page "/BlazorRoute"
@page "/DifferentBlazorRoute"
// highlight-end

<h1>Blazor routing</h1>
```

:::info
For URLs to resolve correctly, the application must include a &lt;base&gt; in its `wwwroot/index.html` file (Blazor WebAssembly) or `Pages/_Layout.cshtml` file (Blazor Server) with the application base path specified in the `href` attribute.
:::