https://github.com/victorqueiroz/react-halter
ReactJS bindings for easy and fast integration with Halter router
https://github.com/victorqueiroz/react-halter
halter lightweight reactjs router simple
Last synced: 2 months ago
JSON representation
ReactJS bindings for easy and fast integration with Halter router
- Host: GitHub
- URL: https://github.com/victorqueiroz/react-halter
- Owner: VictorQueiroz
- License: mit
- Created: 2019-02-28T05:08:20.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-10-05T12:40:13.000Z (over 3 years ago)
- Last Synced: 2025-04-03T13:58:15.571Z (about 1 year ago)
- Topics: halter, lightweight, reactjs, router, simple
- Language: TypeScript
- Size: 224 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-halter
ReactJS bindings for easy integration with Halter router.
### Installation
```
yarn add react-halter
```
### Usage
The `RouterView` component lifecycle will determine what routes should be inside the given `Router` instance using the input `routes`. When `RouterView` is mounted it'll initialize the router instance and when it gets unmounted it'll clear all the routes and so forth
```js
import { createBrowserHistory } from 'history';
import { RouterView } from 'react-halter';
import { Router } from 'halter';
import Login from './components/login/login';
import NavigationBar from './components/navigation-bar/navigation-bar';
import BackendAPI from './services/backend-api';
function Post({ location: { params } }) {
const postId = params.get('id');
if(!postId) {
return null;
}
return (
{posts[postId].title}
{posts[postId].contents}
);
}
function HomeWrapper({ children }){
return (
{children}
)
}
const rules = {
isAuthenticated: async function(match, replaceState, pushState) {
if(await BackendAPI.isAuthenticated()){
replaceState('dashboard');
return true;
}
},
isGuest: async function(match, replaceState, pushState) {
if(await BackendAPI.isAuthenticated()){
return true;
}
replaceState('app.login');
}
}
const routes = [{
path: '/',
name: 'app',
component: HomeWrapper,
childRoutes: [{
name: 'post',
path: 'posts/{id:[A-z0-9]+}',
component: Post
}, {
path: 'login',
name: 'login',
component: Login,
onBefore: rules.isAuthenticated
}]
}, {
name: 'dashboard',
path: '/dashboard',
component: Dashboard,
onBefore: rules.isGuest
}];
ReactDOM.render(
My first app
, document.getElementById('app'));
```