Anew Router
A lightweight React Router framework Use react-navigation for react native routes.
The routes utility uses react-router-dom
and react-router-config
to define application routes. The utility adopts a cascading syntax (method chaining) to build the config passed to react-router-config
.
Table of Contents
Installation
To install anew
directly into your project run:
npm i @anew/router -S
for yarn users, run:
yarn add @anew/router
Create Routes
import Router from '@anew/router' Router
Rendering Routes
/** | ------------------ | Components | ------------------ */ Component { const RouterView = thisprops return <div ="container"> <Navbar /> <div ="body"> </div> <Footer /> </div> } Component { const // Prop passed from parent route // in AppEntry Component someProp // Props passed from AnewRouter route RouterView location: pathname } = thisprops return <div ="container"> <div>Applications</div> <Sidebar> routeroutes </Sidebar> <div ="body"></div> <button>Action</button> </div> } /** | ------------------ | Routes | ------------------ */ Router /** | --------------------- | Mount | --------------------- */ import A '@anew/anew' Anew // or you may pass entry component instead of defining// it in routes\Anew /** | ------------------ | Using ReactDOM.render | ------------------ */ ReactDOM // alternativeReactDOM
Router Components
import Router from '@anew/router' // Same as react-router Redirect component// However a route name can be passed rather// than passing the full path of `about` to the `to` prop<Router.Redirect ='home' /> // Same as react-router Link component<Router.Link ='about' />
Router Utilities
/** | ------------------ | Routes | ------------------ */ Router /** | ------------------ | Checks | ------------------ */ // @return true// Checks if group-name path matches or contains the pathnameRouter // @return true// Alternative method for aboveRouter Router // true /** | ------------------ | Getters | ------------------ */ // @return// [{ path: '/pathTwo/:param', component: AppComponent, name: PathTwoName, ...otherprops }]// Return all routes that match the given pathnameRouter // @reutrn// [{ path: '/group/one', ... }]// You can also define a group name to check for matchsRouter // @return// [{ path: '/group/one', ... }]// Alternative for aboveRouter // @return// { path: '/pathTwo/:param', component: AppComponent, name: PathTwoName, ...otherprops }// Returns the route's dataRouter // @return// /pathTwo:id// Returns a specific data propertyRouter // @return// /pathTwo/1// Returns the route's compiled pathRouter