## Table of Contents

- [Install](#install)
- [Usage](#usage)
- [Client Side Navigation](#client-side-navigation)
- [Polyfill](#polyfill)
- [Documentation](#documentation)
- [Remarks](#remarks)
- [URLPatternList](#urlpatternlist)
- [API](#api)
- [Contributing](#contributing)
- [License](#license)

## Install

deno:

```bash
deno add @miyauci/react-router
```

npm:

```bash
npx jsr add @miyauci/react-router
```

## Usage

The basic exclusive routing is as follows:

```tsx
import {
Route,
Router,
Switch,
useURL,
useURLPatternResult,
} from "@miyauci/react-router";
import { type ReactNode } from "react";

function Home(): ReactNode {
const url = useURL();
const result = useURLPatternResult();

return Home;
}
declare const About: () => ReactNode;
declare const NotFound: () => ReactNode;

function App(props: { url?: string | URL }): ReactNode {
return (

}>

);
}
```

It is best practice to specify the `url` on the server side and nothing on the
client side.

### Client Side Navigation

Intercept the `navigate` event on client side navigation.

Add your client entry point:

```ts
globalThis.navigation.addEventListener("navigate", (e) => {
// if (shouldNotIntercept(e)) return;
e.intercept({
async handler() {},
});
});
```

This ensures that navigation is done only for URL changes. The `Router` will
also subscribe to URL changes and route them reactively.

See
[Modern client-side routing: the Navigation API](https://developer.chrome.com/docs/web-platform/navigation-api)
about `shouldNotIntercept`.

This script may be provided by this project in the future.

### Polyfill

This project relies on a relatively new API.

The API and Polyfill are as follows:

| API | Polyfill |
| ------------------------------------------------------------------------------ | ---------------------------------------------------------------------- |
| [URLPattern](https://developer.mozilla.org/en-US/docs/Web/API/URL_Pattern_API) | [urlpattern-polyfill](https://github.com/kenchris/urlpattern-polyfill) |
| [Navigation](https://developer.mozilla.org/en-US/docs/Web/API/Navigation_API) | [@virtualstate/navigation](https://github.com/virtualstate/navigation) |

## Documentation

- [Router](./docs/router.md)
- [Switch](./docs/switch.md)
- [Route](./docs/route.md)
- [Hooks](./docs/hooks.md)

## Remarks

This chapter supplements the project.

### URLPatternList

This project is based on the
[`URLPatternList`](https://pr-preview.s3.amazonaws.com/lucacasonato/urlpattern/pull/166.html#urlpatternlist-class)
interface. This API is still Draft, but will be replaced when it is generalized.
This should further reduce the bundle size.

## API

See [jsr doc](https://jsr.io/@miyauci/react-router) for all APIs.

## Contributing

See [contributing](CONTRIBUTING.md).

## License