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.

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 = () =&gt; {
  return {
    history: createHashHistory(),
    routes: [
      // Static Component
      {
        path: '',
        component: &lt;&gt;
          <h1>Hello</h1>
        ,
      },
      {
        path: '/home',
        routes: [
          // Dynamic Component 
          {
            path: '',                  // www.example.com/home
            component: (props) =&gt; {
              return (
                &lt;&gt;
                  <button> props.history.push('/foo')}&gt;go foo</button>
                  <button> props.history.push('/bar')}&gt;go bar</button>
                  <button> props.history.push('/home/jack')}&gt;go jack</button>
                
              )
            },
          },
          // URL Parameters
           {
            path: '/:username',        // www.example.com/home/xxx
            component: (props) =&gt; {
              return (
                &lt;&gt;
                  <p>{props.username}</p>
                  <button> props.history.push('/home')}&gt;Go home</button>
                
              )
            }
          }
        ]
      },
      // Code Splitting
      {
        path: '/bar',
        routes: [
          {
            path: '',                 // www.example.com/bar
            component: () =&gt; import(/* webpackChunkName: "bar" */ './Bar').then((Bar) =&gt; {
              // 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: () =&gt; ,  
      },
      // No match (404)
      {
        component: () =&gt; ,
      }
    ]
  }
};

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

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

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

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

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

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

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

API Reference

useRouter({ history, routes })

`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.

{
  path: '/users/:id',
  component: () =&gt; ,  
}

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

{
  component: () =&gt; ,  
}

component

A component to render when the location matches.

{
  path: '/:username',        // www.example.com/home/xxx
  component: (props) =&gt; {
    return (
      &lt;&gt;
        <p>{props.username}</p>
        <button> props.history.push('/home')}&gt;Go home</button>
      
    )
  }
}

exact

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

{
  path: '/foo',
  exact: false,
  component: () =&gt; ,  
}

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.

{
  path: '/foo',
  strict: true,
  component: () =&gt; ,
}

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.

{
  path: '/foo',
  exact: true,
  strict: true,
  component: () =&gt; ,
}

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.

{
  path: '/foo',
  sensitive: ture,
  component: () =&gt; ,  
}

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

withRouter(Componet)

withRouter will pass updated location, and history props to the wrapped component whenever it renders.

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

function Foo(props) {
  const {history, location} = props;
  return <button> history.push('/home') }&gt;{location.pathname}</button>
}
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.

Most popular functions for rax-use-router

To help you get started, we’ve selected a few rax-use-router examples, based on popular ways it is used in public projects.

rax-use-router.useRouter