Bare-bones router for React
npm install react-micro-router 
Bare-bones router for React
* Very minimal (~ 200 loc)
* Solid and uncomplicated for simple use-cases
* Declarative API like react-router
``shell`
npm i -S react-micro-router
`javascript
import React from 'react';
import {Route, Link} from 'react-micro-router';
import {Home, Hello} from './components';
export default function App() {
return (
}
`
#### Nest routes
`javascript`
Fruit
Apples
Oranges
#### Use regular expressions
`javascript`
Thing 1
Thing Two
Back
#### Get current path and regex capture groups
` {path} {params[0]}javascript
function MyComponent(props) {
const {path, params} = props.route;
return (
);
}
// for location.pathname /hello/world outputs:
/hello/([a-z]+)
world
`
#### TypeScript
Use ComponentRouteProps to get access to path and params in your component when using TypeScript.
`tsx
import {ComponentRouteProps} from 'react-micro-router';
type Props = {
text: string;
route: ComponentRouteProps
}
function MyComponent(props: Props) {
const {path, params} = props.route;
return (
{path}
{params[0]}
{props.text}
Note: when calling the component Typescript will complain about the props not being present. To avoid this, either
allow an undefined
prop:`ts
type Props = {
text: string;
route?: ComponentRouteProps;
}
`Or use a function as a child to render child components:
tsx
function Router(props) {
return (
{(route) =>
);
}
`#### Transitions (see react-transition-group for details)
javascriptconst transition = {
name: 'Transition',
appear: true,
appearTimeout: 400,
enter: true,
enterTimeout: 600,
leave: true,
leaveTimeout: 400
};
function App() {
return (
);
}
`
css
.Transition-enter {
opacity: 0;
}.Transition-enter.Transition-enter-active {
opacity: 1;
transition: opacity 400ms ease-in 200ms;
}
.Transition-leave {
opacity: 1;
}
.Transition-leave.Transition-leave-active {
opacity: 0;
transition: opacity 400ms ease-out;
}
.Transition-appear {
opacity: 0;
}
.Transition-appear.Transition-appear-active {
opacity: 1;
transition: opacity 400ms ease-in;
}
`#### Link supports
(it defaults to active).`javascript
Hello
// for route /hello renders HelloHome
// for route / renders Home
`#### Control link active state using Regex
javascript
// links to / but will be active for / and /also
Hello
`#### Get current path and regex capture groups from router
javascript
import {getCurrentPath, getParams} from 'react-micro-router';// example: location.pathname /foo/bar/42
const path = getCurrentPath(); // '/foo/([a-z]+)/([0-9]+)'
const params = getParams(); // ['bar', '42']
``