rax-use-router

Rax hooks for router.

Install

``
npm i rax-use-router --save
`

Example

Use useRouter to config routing rules, each route map to a component.
All route props (location and history) are available to User.

`jsx
import { createElement, Fragment } from 'rax';
import { useRouter } from 'rax-use-router';
import { createHashHistory } from 'history';
import Foo from './Foo';
import NotFound from './NotFound';

const config = () => {
return {
history: createHashHistory(),
routes: [
// Static Component
{
path: '',
component: <>


Hello

,
},
{
path: '/home',
routes: [
// Dynamic Component
{
path: '', // www.example.com/home
component: (props) => {
return (
<>
props.history.push('/foo')}>go foo
props.history.push('/bar')}>go bar
props.history.push('/home/jack')}>go jack

)
},
},
// URL Parameters
{
path: '/:username', // www.example.com/home/xxx
component: (props) => {
return (
<>

{props.username}

props.history.push('/home')}>Go home

)
}
}
]
},
// Code Splitting
{
path: '/bar',
routes: [
{
path: '', // www.example.com/bar
component: () => import(/ webpackChunkName: "bar" / './Bar').then((Bar) => {
// interop-require see: https://www.npmjs.com/package/interop-require
Bar = Bar.__esModule ? Bar.default : Bar;
// return a created element
return ;
}),
},
],
},
{
path: '/foo', // www.example.com/foo
component: () => ,
},
// No match (404)
{
component: () => ,
}
]
}
};

export default function Example() {
const { component } = useRouter(config);
return component;
}
`

`jsx
// Foo.jsx
import { createElement } from 'rax';
import { withRouter } from 'rax-use-router';

function Foo(props) {
return props.history.push('/home') }>Go home
}
export default withRouter(Foo);
`

`jsx
// Bar.jsx
import { createElement } from 'rax';
import { withRouter } from 'rax-use-router';

function Bar(props) {
return props.history.push('/home') }>Go home
}
export default withRouter(Bar);
`

`jsx
// NotFound.jsx
import { createElement } from 'rax';
import { withRouter } from 'rax-use-router';

function NotFound(props) {
return props.history.replace('/home') }>Go home
}
export default withRouter(NotFound);
`

API Reference

$3

#### history
history provides 3 different methods for creating a history object, depending on your environment.
- createBrowserHistory is for use in modern web browsers that support the HTML5 history API (see cross-browser compatibility)
- createMemoryHistory is used as a reference implementation and may also be used in non-DOM environments, like React Native or tests
- createHashHistory is for use in legacy web browsers


#### routes

Route options:

##### path

Any valid URL path or array of paths that path-to-regexp@^1.7.0 understands.

`jsx
{
path: '/users/:id',
component: () => ,
}
`

When doesn’t match any of routes, if there a route without a path will match that rule, just like a 404.

`jsx
{
component: () => ,
}
`

##### component

A component to render when the location matches.

`jsx
{
path: '/:username', // www.example.com/home/xxx
component: (props) => {
return (
<>


{props.username}


props.history.push('/home')}>Go home

)
}
}
`

##### exact

Default true, when false, will not match if the path matches the location.pathname _exactly_.

`jsx
{
path: '/foo',
exact: false,
component: () => ,
}
`

| path | location.pathname | exact | matches? |
| ------ | ----------------- | ------- | -------- |
| /foo | /foo/bar | true | no |
| /foo | /foo/bar | false | yes |

##### strict

Default false, when true, a path that has a trailing slash will only match a location.pathname with a trailing slash. This has no effect when there are additional URL segments in the location.pathname.

`jsx
{
path: '/foo',
strict: true,
component: () => ,
}
`

| path | location.pathname | matches? |
| ------- | ----------------- | -------- |
| /foo/ | /foo | no |
| /foo/ | /foo/ | yes |
| /foo/ | /foo/bar | yes |

Warning: strict can be used to enforce that a location.pathname has no trailing slash, but in order to do this both strict and exact must be true.

`jsx
{
path: '/foo',
exact: true,
strict: true,
component: () => ,
}
`

| path | location.pathname | matches? |
| ------ | ----------------- | -------- |
| /foo | /foo | yes |
| /foo | /foo/ | no |
| /foo | /foo/bar | no |

##### sensitive

Default false, when true, will match if the path is case sensitive.

`jsx
{
path: '/foo',
sensitive: ture,
component: () => ,
}
`

| path | location.pathname | sensitive | matches? |
| ------ | ----------------- | --------- | -------- |
| /foo | /foo | true | yes |
| /foo | /Foo | false | yes |
| /Foo | /foo | true | no |
| /foo | /Foo | true | no |

$3


withRouter will pass updated location, and history props to the wrapped component whenever it renders.
`jsx
// Foo.jsx
import { createElement } from 'rax';
import { withRouter } from 'rax-use-router';

function Foo(props) {
const {history, location} = props;
return history.push('/home') }>{location.pathname}
}
export default withRouter(Foo);
`

#### history

Each history object has the following properties:

- history.length - The number of entries in the history stack.
- history.location - The current location (see below).
- history.action - The current navigation action, such as push, replace, go and so on.

For more information, see history

#### location

The location object implements a subset of the window.location interface, including:

- location.pathname - The path of the URL
- location.search - The URL query string
- location.hash - The URL hash fragment

For more information, see history

Notice

In most cases, we don't recommend using useRouter in multiple places on the page. Reason of this is the latter routerConfig` will override the previous.