hilla.adoc

title	page-title	description	meta-description	order
React	How to navigate to a view in React | Vaadin	Learn how to navigate between React views in a Vaadin application.	This guide covers how to navigate to a React or Flow view in Vaadin applications, including creating links and programmatic navigation.	10

Navigation in React

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.

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:

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.

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:

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.

Flow Views

To navigate from a React 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.

Try It

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

First, generate a walking skeleton with a React UI, open it in your IDE, and run it.

Modify the Todo View

Change the path of the TodoView to todo. The TodoView is stored in the file @index.tsx that is located directly under the views directory. To change its route to /todo, rename the file to todo.tsx so that the directory structure looks like this:

views
├── @layout.tsx
├── _ErrorHandler.ts
└── todo.tsx

This is a convenience step for having a simple and clear Main view for the next steps.

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

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.

Create a Main View

Next, create a new main view. This view is going to be the source of navigation in this mini-tutorial. In the views directory, create a new file called @index.tsx:

@index.tsx

export default function MainView() {
    return <h1>Main View</h1>;
}

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

import { NavLink } from 'react-router';

export default function MainView() {
    return (
        <>
            <h1>Main View</h1>
            <NavLink to="/about">Link to About</NavLink>
        </>
    );
}

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. In the @index.tsx file, change the codes to have the following code:

@index.tsx

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

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

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

    return (
        <>
            <h1>Main View</h1>
            <NavLink to="/about">Link to About</NavLink>
            <button onClick={handleClick}>
                Go to About
            </button>
        </>
    );
}

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 React views and Flow views.

Now that you know how to navigate between views, check out the Pass Data to a View guide to learn how to pass data to a view while navigating to it.