https://github.com/wompojs/wompo-router
Wompo-Router is a library that allows to create a Single Page Application using client routing with wompo.
https://github.com/wompojs/wompo-router
client-routing single-page-applications spa web-components wompo
Last synced: 3 months ago
JSON representation
Wompo-Router is a library that allows to create a Single Page Application using client routing with wompo.
- Host: GitHub
- URL: https://github.com/wompojs/wompo-router
- Owner: wompojs
- License: mit
- Created: 2024-03-21T10:04:29.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-09-25T08:40:02.000Z (8 months ago)
- Last Synced: 2025-02-06T22:51:12.263Z (4 months ago)
- Topics: client-routing, single-page-applications, spa, web-components, wompo
- Language: TypeScript
- Homepage:
- Size: 135 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Wompo Router
Wompo-Router is a Wompo based library to create Single Page Applications using client routing.
Wompo Router uses nested routes to create layouts, based on the famous React-Router library.
## API
Wompo Router exposes the following components to create routes:
- `Routes` - It's the component that will include the whole routing logic. Accepts a
**notFoundElement** prop, which defines what to render when the router don't find a matching
route, and an **origin** prop, which specifies the url location on where the routing starts.
- `Route` - Define a single route. Accepts the following props:
```ts
interface RouteProps extends WompoProps {
path?: string; // The path of the route.
index?: boolean; // True if the route is an index route (of the parent).
redirect?: string; // If valorized, the route will redirect to another one.
element?: RenderHtml; // The element to render.
lazy?: () => LazyCallbackResult; // If valorized, must be a callback that returns a lazy component.
fallback?: RenderHtml; // The fallback element to visualize while a lazy component is being imported.
meta?: {
title?: string;
description?: string;
};
}
```
- `ChildRoute` - Defines where a child route should be rendered inside the parent route. Accepts no props.
It also exposes this helper components:
- `Link` - The component you want to use to navigate across routes. Accepts two props: _to_ (the link), and _target_.
- `NavLink` - Same as Link, but will have an "active" class if the current route corresponds to the link.
Accepts a two props: _to_ (the link), and _target_..
Finally, Wompo Router has the following hooks:
- `useParams` - Will return the parameters for the current route.
- `useNavigate` - Will return a **navigate** function that you can use to manually navigate across routes.
- `useCurrentRoute` - Will return the current route.
- `useRoutes` - Will return the array of routes that the router can handle.
## Creating an Application
This is an example of an application made with Wompo Router:
```javascript
function App() {
return (
} />
}>
} />
} />
}>
} />
} />
);
}
```
The above routing system will generate the following routes:
- /
- /docs ---> will redirect to ---> /docs/overview
- /docs/overview
- /docs/hooks
- /docs/hooks/:name (where "name" is a parameter in the url)
All the other routes will fallback into the `NotFound` Page.
So, if you go to the url _/docs/hooks/useNavigate_, Womp Router will render the
following nested routes where "useNavigate" is assigned to the "name" parameter:
```javascript
```
Actually, this process of nested routes will not happen automatically: the components
`DocsLayout` and `Hooks` will have to tell "Womp Router" where to render the nested
route. To do that, you use the `ChildRoute` component.
Example of `DocsLayout`:
```javascript
...
...
```