Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jamesknelson/react-routing-library
Concurrent routing that grows with your app.
https://github.com/jamesknelson/react-routing-library
Last synced: 13 days ago
JSON representation
Concurrent routing that grows with your app.
- Host: GitHub
- URL: https://github.com/jamesknelson/react-routing-library
- Owner: jamesknelson
- License: mit
- Created: 2020-07-29T14:50:10.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-08-03T10:06:17.000Z (over 4 years ago)
- Last Synced: 2024-10-13T16:11:35.723Z (about 1 month ago)
- Language: TypeScript
- Size: 481 KB
- Stars: 7
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
React Routing Library
Simple, powerful routing that grows with your app.
## Getting Started
```bash
yarn add react-routing-library
```
- [**Read the 2-minute primer**](#2-minute-primer)
- [View the API reference »](./docs/api.md)
## 2-minute primer
**Your router just is a function.**
With React Routing Library, a **router** is a function that maps a request to an element.
```ts
type Router = (request: RouterRequest) => ReactNode
```
You've seen this before -- its a lot like a React component.
```tsx
const router = request => {
switch (request.pathname) {
case '/':
return
Home
case '/about':
return
About
default:
throw new Error('Not Found')
}
}
```
Once you have a router, just pass it to a ``. Then, use a `` element to indicate where you want your content to be rendered.
```tsx
import { Content, RoutingProvider } from 'react-routing-library'
export default function App() {
return (
)
}
```
Routers-as-functions is the underlying secret that makes RRL so powerful. Most of the time though, it's easier to let RRL create router functions for you. For example, the above router could be created with `createPatternRouter()`.
```tsx
import { createPatternRouter } from 'react-routing-library'
const router = createPatternRouter({
'/':
Home
,
'/about': About
})
```
Naturally, your `` element can be nested anywhere inside the routing provider. This lets you easily add layout elements, for example a site-wide navigation bar. And hey presto -- you've now built a simple app with push-state routing!
[*View this example live at CodeSandbox »*](https://codesandbox.io/s/rrl-minimal-vsdsd)
```tsx
import { Link } from 'react-routing-library'
function AppLayout({ children }) {
return (
<>
Home
About
{children}
>
)
}
export default function App() {
return (
)
}
```
## API
[**Components**](/docs/api.md#components)
- [``](/docs/api.md#routingprovider)
- [``](/docs/api.md#content)
- [``](/docs/api.md#link)
- [``](/docs/api.md#notfoundboundary)
[**Hooks**](/docs/api.md#hooks)
- [`useContent()`](/docs/api.md#usecontent)
- [`useIsActive()`](/docs/api.md#useisactive)
- [`useLink()`](/docs/api.md#uselink)
- [`useNavigation()`](/docs/api.md#usenavigation)
- [`usePendingRequest()`](/docs/api.md#usependingrequest)
- [`useRequest()`](/docs/api.md#userequest)
[**Router helpers**](/docs/api.md#router-helpers)
- [`createAsyncRouter()`](/docs/api.md#createasyncrouter)
- [`createLazyRouter()`](/docs/api.md#createlazyrouter)
- [`createPatternRouter()`](/docs/api.md#createpatternrouter)
- [`createRedirectRouter()`](/docs/api.md#createredirectrouter)
[**Functions**](/docs/api.md#functions)
- [`createHref()`](/docs/api.md#createhref)
- [`getRoute()`](/docs/api.md#getroute)
- [`parseHref()`](/docs/api.md#parsehref)
[**Error handling**](/docs/api.md#error-handling)
- [`NotFoundError`](/docs/api.md#notfounderror)
- [`notFoundRouter`](/docs/api.md#notfoundrouter)
[**Types**](/docs/api.md#types)
- [`Route`](/docs/api.md#route)
- [`Router`](/docs/api.md#router)
- [`RouterDelta`](/docs/api.md#routerdelta)
- [`RouterNavigation`](/docs/api.md#routernavigation)
- [`RouterRequest`](/docs/api.md#routerrequest)
- [`RouterResponse`](/docs/api.md#routerresponse)
## License
MIT License, Copyright © 2020 James K. Nelson