Route Lite is a simple, small (2.2kb minified), stack-based router that allows basic navigation by pushing to and popping from the router's state.
# npm < 5
npm install route-lite --save
# npm >= 5
npm install route-lite
# Yarn
yarn add route-liteRoute Lite has a simple API that makes it easy to get started with no config. No declaring routes, no config file, just render the parent component and push components to the stack:
import React from 'react';
import ReactDOM from 'react-dom';
import Router, { Link, goBack } from 'route-lite';
const A = () => {
return (
<Link
component={B}
componentProps={{text: "Component B"}}
>
Component A
</Link>
);
}
const B = ({text}) => {
return <div onClick={() => goBack()}>{text}</div>
}
ReactDOM.render(<Router><A /></Router>, document.querySelector('body'));The library is also available as a UMD or CommonJS build.
The library exports three objects:
export default class Router extends React.Component { /* ... */ }
export function goTo(component: ReactComponent, props: object) { /* ... */ }
export function goBack()The Router class is a React component that accepts no props, but can have children. The children of Router will be rendered when no known components are available in the Router's history.
The Router should be placed at the application root.
The Link component is a convient way to link to an external website or a new component wihtout manually calling goTo. Accepted properties are:
Link.propTypes = {
href: PropTypes.string, // to direct to an external site
component: PropTypes.instanceOf(React.Component), // to put a new component on the stack
componentProps: PropTypes.object,
className: PropTypes.string,
id: PropTypes.string,
onClick: PropTypes.func,
}NOTE: There is a "whitelist" of sorts for props, only data- props will be propogated down to the child link component.
The goTo method accepts two arguments, a component and props. These must be separated so they can be kept in history without having to keep all components rendered at once.
goBack will simply pop the last history item off the stack, effectively returning to the previous screen.
Email: [email protected]
Twitter: @amarkon88
Scout strives to provide a welcoming, inclusive environment for all users, period. To hold ourselves accountable to that mission, Scout has a strictly-enforced code of conduct. Violating those rules will result in removal from the Scout organization, and potentially being banned from contributing to our projects.
We welcome all contributions to our projects! Filing bugs, feature requests, code changes, docs changes, or anything else you'd like to contribute are all more than welcome! More information about contributing to Scout projects can be found in our contributors' guide!
All Scout libraries are ISC-licensed. tl;dr: you can use this code however you'd like, just please attribute us appropriately!
Scout is Northeastern University's student-led design studio. The Studio has about 45 members selected via interview and application processes to select the university's best talent. Each semester the studio produces design and development assets for four ventures. Check out our portfolio for some past projects!