Route Query
Zova enhances route Query
and provides Typescript typing support
Create Page Component
In order to fully demonstrate how to define and use typed Query
, here we create a new page component user
in the module a-demo
:
$ zova :create:page user --module=a-demo
Define Query
Define Query in controller.ts
:
src/suite/a-demo/modules/a-demo/src/page/user/controller.ts
export const QuerySchema = zz.object({
name: zz.string().optional(),
age: zz.number().optional(),
});
- Zova encapsulates zod and provides an enhanced version of
zz
object - An
object
is defined usingzz
, containing two fields:name
andage
Use Query
In render.ts
, you can directly obtain Query and render its fields
src/suite/a-demo/modules/a-demo/src/page/user/render.tsx
export class RenderUser {
render() {
return (
<div>
<div>
name: {this.$query.name}, {typeof this.$query.name}
</div>
<div>
age: {this.$query.age}, {typeof this.$query.age}
</div>
</div>
);
}
}
- The type of
$query.name
isstring | undefined
- The type of
$query.age
isnumber | undefined
Pass in Query
Next, we need to pass in the Query
parameter when navigating the route
Add a button directly to the page component user
, listen to the click event, and use different Query
parameter to navigate to the current page. In this way, we can see that $query
is reactive
export class RenderUser {
render() {
return (
<div>
<div>
name: {this.$query.name}, {typeof this.$query.name}
</div>
<div>
age: {this.$query.age}, {typeof this.$query.age}
</div>
<button
onClick={() => {
const age = (this.$query.age ?? 0) + 1;
const url = this.$router.resolvePath('/a/demo/user', { name: 'tom', age });
this.$router.push(url);
}}
>
Go To Current Page
</button>
</div>
);
}
}
$query
Zova injects a $query
object into the base class of the controller
bean so that the Query
parameter can be obtained through this.$query
in the render instance