Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bigroomstudios/strange-router
A module to aid bringing configurable routes to react-router v4.x
https://github.com/bigroomstudios/strange-router
react react-router
Last synced: 6 days ago
JSON representation
A module to aid bringing configurable routes to react-router v4.x
- Host: GitHub
- URL: https://github.com/bigroomstudios/strange-router
- Owner: BigRoomStudios
- License: mit
- Created: 2017-11-04T17:43:17.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2022-04-21T20:09:31.000Z (over 2 years ago)
- Last Synced: 2024-11-11T06:11:47.272Z (8 days ago)
- Topics: react, react-router
- Language: JavaScript
- Size: 98.6 KB
- Stars: 1
- Watchers: 6
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# strange-router
A module to aid bringing configurable routes to react-router v4
Lead Maintainer - [William Woodruff](https://github.com/wswoodruff)
## Usage
> See also the [API Reference](API.md)
```bash
npm install strange-router
```
### Config
```js
const routes = [
{
path: 'first', // matches '/first'
component: MyComponent,
childRoutes: [
{
path: 'second', // matches '/first/second'
childRoutes: [
{ path: 'third', component: ThirdComponent }, // matches '/first/second/third'
{ redirect: { to: '/404' } } // catch all, redirects to absolute path '/404'
]
},
{ redirect: { from: 'oldPath', to: 'newPath' } } // '/first/oldPath' will redirect to '/first/newPath'
{
path: 'newPath',
component: NewStuff,
onWillMount: ({ route, match, location, history }) => {
fetchSomeData();
},
onDidMount: ({ route, match, location, history }) => {
logSomething();
},
onWillUnmount: ({ route, match, location, history }) => {
cleanup();
},
componentDidCatch: ({ err, info, route, match, location, history }) => {
handleErr(err);
// and / or
history.replace('/onErr', { err, info });
}
},
{ redirect: { to: '/404' } } // catch all, redirects to absolute path '/404'
]
},
{
path: '404',
component: FourOFour
},
{
path: 'onErr',
component: UhOhError
}
];
```
### Integration (w/ redux)
```js
const React = require('react');
const { Provider } = require('react-redux');
const { ConnectedRouter } = require('react-router-redux');
const StrangeRouter = require('strange-router');
class App extends React.PureComponent {
static propTypes = {
history: T.object.isRequired,
routes: T.array.isRequired,
store: T.object.isRequired
}
render() {
const { history, routes, store } = this.props;
return (
);
}
};
```