https://github.com/dragos-tudor/frontend-routing
Rewritten React router library [functional principles].
https://github.com/dragos-tudor/frontend-routing
functional functional-components functional-programming react-router router
Last synced: about 2 months ago
JSON representation
Rewritten React router library [functional principles].
- Host: GitHub
- URL: https://github.com/dragos-tudor/frontend-routing
- Owner: dragos-tudor
- License: mit
- Created: 2023-11-19T09:55:45.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-04-23T11:45:46.000Z (about 1 year ago)
- Last Synced: 2025-04-23T12:35:52.362Z (about 1 year ago)
- Topics: functional, functional-components, functional-programming, react-router, router
- Language: JavaScript
- Homepage:
- Size: 191 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## Frontend routing library
- simplified React-Router like library.
- Deno-based routing library [Node-free].
- functional-style library [OOP-free].
### Usage
```javascript
import { render, registerLinkeDomParser } from "/scripts/rendering.js"
import { Router, Route, NavLink, navigate } from "/scripts/routing.js"
await registerLinkeDomParser()
const loadSpecialOffer = async () => {
const {SpecialOffer} = await import("/components/special-offer.jsx");
return ;
}
const Home = () =>
{"home"}
const Contact = () => {"contact"}
export const App = () => {
return (
{"Home"}
{"Contact"}
{"Special offer"}
} index>
}>
)
}
render(, document.body)
navigate(document.querySelector("router"), "/")
```
### Modules
- *high-level modules*: routing, routing-components.
- *low-level modules*: routing-html, routing-locations, routing-params, routing-urls.
- *low-level modules* completely independent ["parallel" modules].
### [Routing](./routing/)
- main functionality: route navigation, change routes, update routing consumers.
- `navigateToRoute`:
- for current element find html root.
- store location, search params, history [skipped by `navigateFromHistory`].
- change routes starting from root [`changeRoutes`].
- update **current path** routing consumers starting from root.
- `changeRoutes`:
- find matching route for url.
- store route params.
- show matched route, hide sibling routes.
- show route static child (jsx factory) or dynamic loaded child.
- remove route path from url.
- change descendant routes with remaining url.
### [Components](./routing-components/)
- main functionality: implement routing components.
- `Router`:
- register `popstate` event handler `navigateToHistoryRoute`.
- register `navigate` event handler `navigateToRoute`.
- `Route`: set static (jsx factory) or dynamic loading function.
- `NavLink`: on click raise `navigate` event.
### [Routes](./routing-routes/)
- main functionality: implement route operations.
- find and toogle routes.
- render routes children.
- find route siblings.
- manage routes data.