ink-router
An implementation of react-router for ink.
Installation
Using yarn:
$ yarn add ink-router
Usage
As much as possible, this project aims to match the behaviour of react-router.
It exposes the following components (and higher-order component):
<Router />
Wraps your command-line application with a router context:
Accepts the following props:
Prop | Description | Default |
---|---|---|
initialEntries |
An array of URLs to populate the router history with | ['/'] |
initialIndex |
The initial index in initialEntries at which navigation should begin |
0 |
keyLength |
The length of key to generate to uniquely identify each route |
6 |
children |
A single child element to render | required |
getUserConfirmation |
A function to use to confirm navigation. NOTE: There is no <Prompt /> component yet, and as such no need for getUserConfirmation . |
none |
<CommandLineRouter />
Provides an instance of Router, with its initial route set based on the arguments passed to the current process. In other words, it translates command-line arguments to a path that your application can use for routing, and other decisions.
Command-line arguments are parsed using yargs-parser.
It accepts the same props as Router
, with the following changes:
Prop | Description | Default |
---|---|---|
args |
An array of arguments to parse and use as the initial route | process.argv.slice(2) |
options |
An optional object of options to pass to yargs-parser | none |
initialEntries |
An array of history entries to prepend to the initially derived route | [] |
initialIndex |
As per Router |
initialEntries.length |
<Route />
Just like in react-router, this allows you to control the rendering of a component, based on whether the specified path matches the current router location.
Accepts the following props:
Prop | Description | Default |
---|---|---|
path |
The path on which to match. Supports named parameters, as per path-to-regexp |
'/' |
exact |
If true , the component will only render if the path matches exactly. |
false |
component |
The component to render if the path matches | required |
NOTE: While react-router's Route
component accepts 3 different ways to
render an element, ink-router only supports one: the component
prop.
The rendered component will be passed the following properties:
// Assuming the following route matched<Route path="/settings/:settingsView" component=SettingsView /> // SettingsView will receive these props match: path: '/settings/accounts' // The exact path matched params: settingsView: 'accounts' location: ... // An object containing the current location from history history: ... // The history object from the router
<Switch />
When given a set of <Route />
as children, this component will only render
the first that matches the current location.
Providing a fallback route
In the above example, when the user supplies arguments of not a route
to the command, the default
fallback message is shown, providing information about the route supplied.
You can override this message by providing a catch-all route as the last child
of your <Switch />
:
Alternatively, you can pass the component to render as the notFound
prop of your
<Switch />
, although support for this may be removed in future:
withRouter(WrappedComponent)
A higher-order component that empowers a child component with router powers.
Here's an example of a component that redirects after a few seconds:
static propTypes = delay: PropTypesnumber to: PropTypesstringisRequired history: PropTypesshape replace: PropTypesfunc static defaultProps = delay: 3000 { thistimeout = } { } { thispropshistory } { return <Text italic>Redirecting shortly...</Text> } RedirectAfterTime