Introduction

This package is a router that provides transition animations and fully preserves the state of previous elements, offering an experience close to a Web standard API.

> __See Also__

> The keep-alive feature is enabled by default and documented, but the options for keep-alive have not yet been made configurable or customizable.
> See Also, If you want the change-log by version for this package. refer to Change Log for details.

Preview

The image below is a simple use gif of Quark Icons and a website created using @web-package/react-widgets-router and @web-package/react-widgets.

!preview

Usage

This below codes are a simple example of the basic usage of this package.

> See Also, Instead of setting the default attribute to true, you can also set the path attribute to *.

``ts
return (



} default={true} />
Hello, World!} />

)
`

$3


`tsx
function ExamplePage1() {
return (
RouterBinding.instance.push("/exmaple-2")}>
Go to /example-2

)
}
`

$3

You need to keep that in mind about this feature is an experimental stage.

`tsx
function ExamplePage2() {
const route = useRoute();

return (
route("/exmaple-1")}>
Go to /example-1

)
}
``

The Properties of CSS

| Name | Description | Default |
| ---- | ----------- | ---- |
| --router-fadein-keyframe | This variable is animation name of a fade-in transition keyframe for this router. | None
| --router-fadein-duration | This variable is animation duration of a fade-in transition for this router. | 0.3s
| --router-fadeout-keyframe | This variable is animation name of a fade-out transition keyframe for this router. | None
| --router-fadeout-duration | This variable is animation duration of a fade-out transition for this router. | 0.3s