Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/router5/router5
Flexible and powerful universal routing solution
https://github.com/router5/router5
framework-agnostic functional javascript react reactive-programming redux router routing universal
Last synced: 1 day ago
JSON representation
Flexible and powerful universal routing solution
- Host: GitHub
- URL: https://github.com/router5/router5
- Owner: router5
- License: mit
- Created: 2015-06-29T12:28:12.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T05:57:10.000Z (almost 2 years ago)
- Last Synced: 2024-12-11T18:52:27.489Z (1 day ago)
- Topics: framework-agnostic, functional, javascript, react, reactive-programming, redux, router, routing, universal
- Language: TypeScript
- Homepage: https://router5.js.org
- Size: 6.65 MB
- Stars: 1,714
- Watchers: 19
- Forks: 105
- Open Issues: 104
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- favorite-link - 灵活而强大的通用路由解决方案。
- awesome-list - router5
- awesome-f2e-libs - **router5** - 通用的路由方案。 (react 相关库 / macros)
README
# Router5
[](http://badge.fury.io/js/router5)
[](https://opensource.org/licenses/MIT)
[](https://travis-ci.org/router5/router5) [](https://gitter.im/router5/router5?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) [](https://github.com/prettier/prettier)
> Official website: [router5.js.org](https://router5.js.org)
router5 is a **framework and view library agnostic router**.
- **view / state separation**: router5 processes routing **instructions** and outputs **state** updates.
- **universal**: works client-side and server-side
- **simple**: define your routes, start to listen to route changes
- **flexible**: you have control over transitions and what happens on transitions
```javascript
import createRouter from 'router5'
import browserPlugin from 'router5-plugin-browser'
const routes = [
{ name: 'home', path: '/' },
{ name: 'profile', path: '/profile' }
]
const router = createRouter(routes)
router.usePlugin(browserPlugin())
router.start()
```
**With React \(hooks\)**
```javascript
import React from 'react'
import ReactDOM from 'react-dom'
import { RouterProvider, useRoute } from 'react-router5'
function App() {
const { route } = useRoute()
if (!route) {
return null
}
if (route.name === 'home') {
return
Home
}
if (route.name === 'profile') {
return
Profile
}
}
ReactDOM.render(
,
document.getElementById('root')
)
```
**With observables**
Your router instance is compatible with most observable libraries.
```javascript
import { from } from 'rxjs/observable/from'
from(router).map(({ route }) => {
/* happy routing */
})
```
### Examples
- With React: [`code`](./examples/react) | [`live`](https://codesandbox.io/s/github/router5/router5/tree/master/examples/react)
### Docs
- Introduction
- [Why router5?](https://router5.js.org/introduction/why-router5)
- [Getting Started](https://router5.js.org/introduction/getting-started)
- [Ecosystem](https://router5.js.org/introduction/ecosystem)
- [Core concepts](https://router5.js.org/introduction/core-concepts)
- [Transition phase](https://router5.js.org/introduction/transition-phase)
- Guides
- [Defining routes](https://router5.js.org/guides/defining-routes)
- [Path Syntax](https://router5.js.org/guides/path-syntax)
- [Router options](https://router5.js.org/guides/router-options)
- [Navigating](https://router5.js.org/guides/navigating)
- [In the browser](https://router5.js.org/guides/in-the-browser)
- [Observing state](https://router5.js.org/guides/observing-state)
- Integration
- [With React](https://router5.js.org/integration/with-react)
- [With Redux](https://router5.js.org/integration/with-redux)
- Advanced
- [Plugins](https://router5.js.org/advanced/plugins)
- [Middleware](https://router5.js.org/advanced/middleware)
- [Preventing navigation](https://router5.js.org/advanced/preventing-navigation)
- [Errors and redirections](https://router5.js.org/advanced/errors-and-redirections)
- [Dependency injection](https://router5.js.org/advanced/dependency-injection)
- [Loading async data](https://router5.js.org/advanced/loading-async-data)
- [Universal routing](https://router5.js.org/advanced/universal-routing)
- [Listeners plugin](https://router5.js.org/advanced/listeners-plugin)
- [API Reference](https://router5.js.org/api-reference)