> Markdown version of [Hilla](https://vaadin.com/docs/v24/building-apps/views/navigate/hilla). Section index: [llms.txt](https://vaadin.com/docs/v24/building-apps/llms.txt)

# Navigation in Hilla

In this guide, you’ll learn how to use `<NavLink>` component and `useNavigate` hook of `react-router` to navigate between views. At the end, a mini-tutorial helps you to apply these concepts in a real Vaadin application.

## <a id="navigating-between-views-using-links"></a>Navigating Between Views Using Links

The `<NavLink>` component from `react-router` renders a clickable link for navigation. In HTML, it corresponds to an anchor (`<a>`) element.

> **Tip:** Links are preferable to programmatic navigation because they **improve accessibility**. They also allow users to open links in new browser tabs.

For example, to create a link to a view located at `/some-view`, you can use the following code:

```tsx
import { NavLink } from 'react-router';

<NavLink to="/some-view">Some View</NavLink>
```

This code creates a clickable link labeled "Some View" that navigates to the `/some-view` route when clicked.

## <a id="programmatic-navigation"></a>Programmatic Navigation

In some scenarios, you may need to navigate between views programmatically, such as after a form submission or in response to user interactions. For this you can use the `useNavigate` hook of `react-router` to achieve this.

Here’s an example of how to use `useNavigate` for programmatic navigation:

```tsx
import { useNavigate } from 'react-router';

function MyComponent() {
const navigate = useNavigate();

  const handleClick = () => {
    navigate('/target-view');
  };

  return (
    <button onClick={handleClick}>
      Go to Target View
    </button>
  );
}
```

In the above example, clicking the button navigates the user to `/target-view`.

## <a id="flow-views"></a>Flow Views

To navigate from a Hilla view to a Flow view that is implemented in Java, the same principles apply. You can use the `NavLink` component or the `useNavigate` hook to navigate to the Flow view.

## <a id="try-it"></a>Try It

In this mini-tutorial, you’ll learn how to navigate between Hilla views using both **links** and **programmatic navigation**.

Set Up the Project

First, generate a [walking skeleton with a Hilla UI](https://vaadin.com/docs/v24/getting-started/start.md), [open](https://vaadin.com/docs/v24/getting-started/import.md) it in your IDE, and [run](https://vaadin.com/docs/v24/getting-started/run.md) it.

Create the About View

You’ll start by creating a new view called `AboutView`. This view is going to be the target view of navigation in this mini-tutorial. In the `views` directory, create a new file named `about.tsx`:

about.tsx

```tsx
export default function AboutView() {
    return <h1>About View</h1>;
}
```

The path for this view is automatically resolved to `/about`, and users can access it by navigating to `https://example.com/about`.

Add a Link to the Main View

Now, add a link that targets the `AboutView` from the `MainView`. In the `@index.tsx` file, add the following code:

@index.tsx

```tsx
import { NavLink } from 'react-router';
...

export default function MainView() {
    return (
        <main className="p-m">
            <h1>Main View</h1>
            <NavLink to="/about">Link to About</NavLink>
        </main>
    );
}
```

This code creates a clickable link labeled "Link to About" that navigates to the `/about` route when clicked.

Add a Button for Programmatic Navigation

Now, add a button that navigates to the `AboutView` programmatically. Change the `@index.tsx` file as follows:

frontend/views/@index.tsx

```tsx
import { NavLink, useNavigate } from 'react-router';
...

export default function MainView() {
    const navigate = useNavigate();

    const handleClick = () => {
        navigate('/about');
    };

    return (
        <main className="p-m">
            <h1>Main View</h1>
            <NavLink to="/about">Link to About</NavLink>
            <button onClick={handleClick}>
                Go to About
            </button>
        </main>
    );
}
```

This code creates a button labeled "Go to About" that navigates to the `/about` route when clicked.

Test the Navigation

Now, run the application and navigate to the main view. You should see the "Link to About" link and the "Go to About" button. Clicking either of them should navigate you to the `AboutView`.

Final Thoughts

You’ve now explored different ways to navigate between views. Here’s what you’ve learned:

- Creating a navigation link using `NavLink` component from `react-router` library.

- Programmatically navigating using the `useNavigate` hook from `react-router` library.

- Navigating between Hilla views and Flow views.

Now that you know how to navigate between views, check out the [Pass Data to a View](https://vaadin.com/docs/v24/building-apps/views/pass-data.md) guide to learn how to pass data to a view while navigating to it.