react-router-lite
Version:
Similar to `react-router` but leaner.
59 lines (46 loc) • 1.28 kB
Markdown
# react-router-lite
Similar to `react-router` but leaner.
Provide your route in the `[route]` prop to the `Router` component and use
the `Route` components to define your routes.
```tsx
import {Router, Route} from 'react-router-lite';
<Router route="/foo/bar">
<Route>
<span>1</span>
</Route>
<Route match="/baz">
<span>2</span>
</Route>
<Route match="/foo">
<span>3</span>
</Route>
<Route match="/foo/bar">
<span>4</span>
</Route>
</Router>;
```
You can use the `Switch` component to render only the first route that matches.
```tsx
import {Router, Switch, Route} from 'react-router-lite';
<Router route={'/any/string/goes/here'}>
<Switch>
<Route match="/any/string" render={() => <div>hello world</div>}>
<Route match="/any/string/goes" render={() => <div>not hello</div>}>
</Switch>
</Router>
```
The routes can be nested. When `[truncate]` prop is set, the nested routes will
be truncated to the parent route.
```tsx
import {Router, Route} from 'react-router-lite';
<Router route="/foo/bar">
<Route match={'/foo'} truncate>
<span>foo</span>
<Route match="/bar">
<span>bar</span>
</Route>
</Route>
</Router>;
```
## License
[Unlicense](LICENSE) — public domain.