React-Pathfy
Probably the simplest router for React applications you will find.
Instalation
npm i --save react-pathfy
Guide
To use React-Pathfy you have to set its routing elements as parents of the other elements in your application.
React-Pathfy has two routing elements Root
and Path
. Root
must be the
top most element in your elements tree. It receives Path
elements as children.
Path
elements may contain other Path
.
;;;; { return <Root mode='browser'> <Path origin="/hello" component= <h1>Hello World</h1> /> <Path origin="/some"> <Path origin="/path" component= MyComponent /> </Path> <Path notFound= true component= NotFound /> </Root> ; } ReactDOM;
Root
Defines the root of all paths.
props
mode: the mode React-Pathfy must use. The available options are browser,
hash and memory. You should use the memory
mode when you are developing a
ReactNative app or an application that doesn't rely on URLs. Defaults to browser.
Path
Defines each path of an application.
Every path must have a component associated. Path
elements can be nested.
The inner elements will be passed as children to their parents. All Path
elements
in a path tree will receive the pathfy
props.
props
origin: the URL or key of a path. The URLs are combined if the Path
elements
are nested.
component: the component to be rendered.
notFound: A boolean value that defines a path to be used when no other paths respond to a request.
Link
Defines a link element that changes the current path.
;{ return <Link to= '/payment' state= type: 'credit-card' /> }
props
to: the URL or key of the target path.
state: the data to be passed to the rendered component
origin
The origin defines the URL pattern or the key of the path. When the path responds to a URL, wildcards can be used to capture parameters.
/something/:parameter1
/something/:parameter1/(:parameter2)
In the first example above, :parameter1 defines a mandatory parameter. In the second example, (:parameter2) defines an optional parameter.
All origin parameters can be accessed by props.pathfy.params
props.pathfy
When a component is rendered it receives a pathfy
props that has relevant resources
to be used.
properties
action: The action that drove to that path. The possible values are INITIAL
,
PUSH
, POP
, REPLACE
state: The data passed when using the Link element.
origin: the current origin.
history: the global active history object.
params: the parameters in the URL.
query: an object representing the query string.
history
It is the most important dependency of React-Pathfy. Check the docs at https://www.npmjs.com/package/history
You can require the active history object from the react-pathfy module and use it, for example, in a Redux reducer.
import { history } from 'react-pathfy'
To change the current path you would use as following:
history.push('/some-path')
TODO
- Middlewares
- Force default route