ReactJS bindings for easy integration with Halter router.
yarn add react-halter
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
import{createBrowserHistory}from'history';import{RouterView}from'react-halter';import{Router}from'halter';importLoginfrom'./components/login/login';importNavigationBarfrom'./components/navigation-bar/navigation-bar';importBackendAPIfrom'./services/backend-api';functionPost({location: { params }}){constpostId=params.get('id');if(!postId){returnnull;}return(<div><h3>{posts[postId].title}</h3><p>{posts[postId].contents}</p></div>);}functionHomeWrapper({ children }){return(<div><NavigationBar/><div>{children}</div></div>)}construles={isAuthenticated: asyncfunction(match,replaceState,pushState){if(awaitBackendAPI.isAuthenticated()){replaceState('dashboard');returntrue;}},isGuest: asyncfunction(match,replaceState,pushState){if(awaitBackendAPI.isAuthenticated()){returntrue;}replaceState('app.login');}}constroutes=[{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(<div><h1>My first app</h1><RouterViewrouter={newRouter(createBrowserHistory())}routes={routes}/></div>,document.getElementById('app'));