([]);
useEffect(() => {
if (categoryName == undefined) { // (1)
ProductService.allProducts().then((data) => products.value = data);
} else {
ProductService.productsInCategory(categoryName).then((data) => products.value = data);
}
}, [categoryName]); // (2)
return (
{products.value.map((product) => (
- {product}
))}
);
}
```
1. When the parameter is absent, fetch all products; otherwise fetch products in the given category.
2. Fetches the products again whenever the parameter changes — for example, when the user navigates from one category to another without leaving the view.
### Wildcard Parameters
A wildcard parameter matches any number of unmatched URL segments and is typically used as a fallback for unknown routes — for example, a custom 404 page. Name the file `{…wildcard}.tsx`:
```
views/
├── @index.tsx
├── about.tsx
├── contact-us.tsx
└── {...wildcard}.tsx (1)
```
1. Matches any route not handled by another view.
views/{…wildcard}.tsx
```tsx
import { NavLink, useParams } from "react-router";
export default function WildcardView() {
const wildcard = useParams()['*']; // (1)
return (
<>
Page Not Found!
The '/{wildcard}' route does not exist.
Go back to the home page.
);
}
```
1. The wildcard value is read from the `*` key. It can contain multiple segments.
## Query Parameters
Use the `useSearchParams` hook for query parameters, which are useful for shareable state that should survive a page reload, such as a search term or sort order. The hook returns a `URLSearchParams` object for reading and a function for updating:
```tsx
import { useSearchParams } from 'react-router';
import { TextField } from '@vaadin/react-components/TextField.js';
export default function ProductView() {
const [searchParams, setSearchParams] = useSearchParams();
const searchTerm = searchParams.get('category') || '';
return (
{
const newValue = e.detail.value;
setSearchParams(newValue ? { category: newValue } : {}); // (1)
}}
/>
);
}
```
1. Updating with an object sets the parameters; passing an empty object clears them.
When updating one parameter among several, spread the existing ones to preserve them:
```tsx
const updateParams = (params: Record) => {
setSearchParams({ ...Object.fromEntries(searchParams), ...params });
};
```
> **Caution:** Query parameters are visible in the URL. Never put sensitive data such as security tokens in them.
## Router Layouts
A router layout is a React component that wraps other views to provide shared UI — such as a header, navigation drawer, or footer. Layouts don’t create routes of their own; they wrap the views that do.
### Creating a Layout
Create a file named `@layout.tsx` in any directory under `views`. By convention, it wraps all views in that directory and its subdirectories. The layout must render an `` where child views appear:
frontend/views/@layout.tsx
```tsx
import { Outlet } from 'react-router';
export default function MainLayout() {
return (
);
}
```
1. Placeholder where child views render.
### Nested Layouts
A `@layout.tsx` in a subdirectory wraps the views in that subdirectory, nested inside any parent layouts:
```
views
├── customers
│ ├── @index.tsx
│ └── @layout.tsx (1)
├── @index.tsx
└── @layout.tsx (2)
```
1. Wraps all views under `customers`.
2. Wraps all views in the application.
### Skipping Layouts
Some views, such as a login view, should not be rendered inside any layout. Set `skipLayouts` in the view’s `ViewConfig`:
frontend/views/login.tsx
```tsx
import { ViewConfig } from '@vaadin/hilla-file-router/types.js';
export default function LoginView() {
return Login form here
;
}
export const config: ViewConfig = {
skipLayouts: true, // (1)
};
```
1. Render this view outside all layouts.
### Building a Navigation Menu
Use the `createMenuItems()` utility to generate menu items from your route structure. This is convenient inside a layout that renders an application shell, such as `AppLayout` with a `SideNav`:
frontend/views/@layout.tsx
```tsx
import { createMenuItems } from '@vaadin/hilla-file-router/runtime.js';
import { useLocation, useNavigate } from 'react-router';
import { SideNav } from '@vaadin/react-components/SideNav.js';
import { SideNavItem } from '@vaadin/react-components/SideNavItem.js';
import { Icon } from '@vaadin/react-components/Icon.js';
export default function MainMenu() {
const navigate = useNavigate();
const location = useLocation();
return (
path && navigate(path)} location={location}>
{createMenuItems().map(({ to, icon, title }) => (
{icon && }
{title}
))}
);
}
```
> **Note:** `createMenuItems()` returns all routes in the application, **including Flow views**. This lets a single shared menu link to both React and Flow views.