https://github.com/threepointone/routah
yet another router for react
https://github.com/threepointone/routah
Last synced: about 1 month ago
JSON representation
yet another router for react
- Host: GitHub
- URL: https://github.com/threepointone/routah
- Owner: threepointone
- License: mit
- Created: 2016-01-14T12:12:12.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-09-13T19:12:13.000Z (over 8 years ago)
- Last Synced: 2025-03-25T09:11:14.954Z (2 months ago)
- Language: JavaScript
- Homepage:
- Size: 86.9 KB
- Stars: 22
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
routah
---
** DEPRECATED - USE REACT ROUTER v4 **
`npm install routah --save`
- heavily inspired by [react-router](https://github.com/rackt/react-router) and [react-motion](https://github.com/chenglou/react-motion)
- render `` elements anywhere in your app
- [express](http://expressjs.com/)-style pattern matching
- server-side friendly
- tests
- more!
```jsx
import {Router, Route, Link, Redirect} from 'routah';
function App(){
return
{/* link across the app */}
- Page 1
- Page 2
- Page 3
- Page 4
{/* renders when the browser url is /1 */}
{/* and similarly when /2 */}
{/* match across paths */}
{
location => // you can use a render callback
{/* render routes wherever */}
}
{/* you can also redirect to other portions of the app */}
{
location => // triggers a `history.push`
}
{/* read the docs/examples for more! */}
;
}
ReactDOM.render(, document.body)
```
Router
---
Wrap your application in a `` element to start the router
```jsx
render(, element);
```
- `history` - (optional) [history](https://github.com/rackt/history) object
Route
---
A `` element renders only when the current url matches the `path` expression.
```jsx
// you can use a render-callback
{
() =>
About Us
}
// or pass the component and optionally props
```
- `path` - an [express-style](https://github.com/pillarjs/path-to-regexp) path matcher
- `path` - an array of the above
- render via `children (location, history)` - a [render-callback](https://discuss.reactjs.org/t/children-as-a-function-render-callbacks/626)
- render via `component` - a `React.Component` which will receive *{location, history}* as props
- `passProps` - additional props to transfer when using `component`
- `onMount (location)`
- `onEnter (location, callback)`
- `onLeave (location, callback)`
- `onUnload (location)`
- `notFound (location)` - a render-callback when `path` doesn't match. defaults to `() => null`
Link
---
A `` is a replacement for `` elements
```jsx
message {id}
```
- `to` - url
- `to` - a [location descriptor](https://github.com/rackt/history/blob/master/docs/Glossary.md#locationdescriptor)
- `onClick`, `className`, `style` - analogous to ReactDOM props
Redirect
---
A `` triggers a redirect to `to` whenever/wherever rendered.
```jsx
{
() =>
}
```
- `to` - url
- `to` - a [location descriptor](https://github.com/rackt/history/blob/master/docs/Glossary.md#locationdescriptor)
RouteStack
---
This emulates a behavior from react-router - given one or more ``, render only the first matching element. This makes it easy to make Index/NotFound pages. eg -
```jsx
}>
```
- `children` - one or more `` elements
- `notFound (location)` - when no child matches. good for 404s!
context.history
---
The `history` object is passed via `context` to all its descendants. Use it to trigger actions on the url -
- `push` - url
- `push` - [location descriptor](https://github.com/rackt/history/blob/master/docs/Glossary.md#locationdescriptor)
- `replace` - url
- `replace` - [location descriptor](https://github.com/rackt/history/blob/master/docs/Glossary.md#locationdescriptor)
- `go(n)`
- `goBack()`
- `goForward()`
- [more](https://github.com/rackt/history/blob/master/docs/GettingStarted.md)
differences from react-router
---
- `Route` accepts a 'children as a function' [render-callback]([render-callback](https://discuss.reactjs.org/t/children-as-a-function-render-callbacks/626)) (as an alternative to `component`/`passProps` props)
- `` elements can be rendered anywhere in the app
- urls don't get 'nested', no activeClass/activeStyle - [issue #1](https://github.com/threepointone/routah/issues/1)
- sibling `` elements don't depend on each other (use `` for similar behavior)
- no async data/components/routes loading - consider using a lib like [AsyncProps](https://github.com/rackt/async-props), [react-resolver](http://ericclemmons.com/react-resolver/), etc