https://github.com/metalabdesign/waygate
Routing experiment cause that's hot right now.
https://github.com/metalabdesign/waygate
bootstart react react-router redux
Last synced: about 2 months ago
JSON representation
Routing experiment cause that's hot right now.
- Host: GitHub
- URL: https://github.com/metalabdesign/waygate
- Owner: metalabdesign
- Created: 2018-01-20T07:58:29.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-01-20T09:38:40.000Z (over 8 years ago)
- Last Synced: 2025-10-04T07:23:32.301Z (9 months ago)
- Topics: bootstart, react, react-router, redux
- Language: JavaScript
- Size: 74.2 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# waygate
You probably want [react-router] instead.
Leveraging `redux` to power your react routing needs. The API very closely resembles [react-router] because familiarity is good and I personally like the declarative syntax. This exists mostly as an experiment to have _all_ the routing state controlled by `redux`. For people who lean more towards the purist side of functional programming this may be appealing. Works with [react-hot-loader] too.
## Usage
```js
import React from 'react';
import {Provider} from 'react-redux';
import {Match, Switch, navigate} from 'waygate';
// Create a `Link` component for your app.
const Link = connect(null, {navigate})(({navigate, to, ...rest}) => (
{
ev.preventDefault();
navigate(to);
}}
{...rest}
/>
));
// Create a navigation tree.
const App = ({store}) => (
Foo
Go to /bar
Bar
);
export default App;
```
### web
Connect `waygate` to the HTML5 history API:
```js
import {createStore as baseCreateStore, applyMiddleware} from 'redux';
import {createMiddleware as waygate} from 'waygate';
import reducer from '...';
const createStore = (initialState) => {
const middleware = applyMiddleware(
waygate(),
);
return baseCreateStore(reducer, initialState, middleware);
};
export default createStore;
```
### node
Manually dispatch `navigate()` actions.
```js
import ReactDOMServer from 'react-dom/server';
import {navigate} from 'waygate';
import createStore from '...';
import App from '...';
const render = (path) => {
const store = createStore();
store.dispatch(navigate(path));
return ReactDOMServer.renderToString(
);
};
export default render;
```
## API
### Switch
Render the first match-compatible component in a list of children. Switch does not render child `Match` nodes in the react tree – only their children. This allows you to perform animations and transitions with tools like `react-motion`.
```js
const willLeave = () => ({opacity: 0});
const styles = (children) => React.Children.map(children, (child) => {
return {
key: child.key,
style: {opacity: 1},
data: child,
}
});
const Transition = ({children}) => (
{
{styles.map(({style: {opacity}, data: child, key}) => (
{child}
))}
}}
/>
);
```
### Match
Simple match component that allows path and selector based matching.
```js
I will render when at `/foo`
```
You can also pull out params from the path:
```js
{({name}) => (
Hello {name}
)}
```
[react-router]: https://github.com/ReactTraining/react-router
[react-motion]: https://github.com/chenglou/react-motion
[react-hot-loader]: https://github.com/gaearon/react-hot-loader