Ctrl-react-router NPM

ctrl-react-router

An alternative way of handling routing in React.

Installation

Yarn is recommended for installation.

$ yarn add --dev ctrl-react-router

But you can still use npm:

$ npm install --save-dev ctrl-react-router

Props

log - Takes an optional debug logger.

Example:

<CtrlReactRouter log={debug('my-debug:router')}/>

Context Properties and Methods

CtrlReactRouter use React's getchildContext method to pass usable info and actions to its children. It's recommended that you use the CtrlReactComponent class to take full advantage of the router.

String hash

The parsed hash.

Example:

// Route is /settings#name

class Test extends CtrlReactComponent {
  render() {
     const {hash} = this.context.router

     return (
       <div>
         <div>Hash: {hash}</div>
       </div>
     )
  }
}

<CtrlReactRouter>
  <Test/>
</CtrlReactRouter>

// Output:
// Hash: name

Object query

The parsed query object.

Example:

// Route is /login?type=user&id=1989

class Test extends CtrlReactComponent {
  render() {
    const {query} = this.context.router

    return (
      <div>
        <div>ID: {query.id}</div>
        <div>Type: {query.type}</div>
      </div>
    )
  }
}

<CtrlReactRouter>
  <Test/>
</CtrlReactRouter>

// Output:
// ID: 1989
// Type: user

Array route

The parsed route object.

Example:

// Route is /app/users/1989/profile

class Test extends CtrlReactComponent {
  render() {
    const {route} = this.context.router

    return (
      <ul>
        {route.map((part) => <li>part</li>)}
      </ul>
    )
  }
}

<CtrlReactRouter>
  <Test/>
</CtrlReactRouter>

// Output:
// - app
// - users
// - 1989
// - profile

Boolean filterChildren(Any child)

Decide whether or not a child component should be rendered depending on what their routeFilter method returns. If it does not have a routeFilter method, always render the child.

param Any child - Child to be filtered.
returns Boolean - Whether the child should be rendered or not.

Example:

// filterChildren is called internally by the router to determine which child
// components should be rendered.
<CtrlReactRouter>
  // If the route is /fruits, this component will be rendered and filterChildren
  // will be internally called to filter its child components.
  <CtrlReactComponent routeFilter={([category]) => category === 'fruits'}>
    // Since this component does not have a routeFilter method, it will always
    // be rendered as long as the route begins with /fruits.
    <h1>Fruits</h1>

    // If the route is /fruits/apple, this component will be rendered and
    // filterChildren will be internally called to filter its child components.
    <CtrlReactComponent routeFilter={([fruit]) => fruit === 'apple'}>
      
      // Since this component does not have a routeFilter method, it will always
      // be rendered as long as the route begins with /fruits/apple.
      <h2>Apple</h2>
    </CtrlReactComponent>
  </CtrlReactComponent>
</CtrlReactRouter>

Boolean updateRoute(String path, Number scroll)

Update the URL path. This also updates state and browser history.

param String path - Target relative URL path.
param Number scroll - Target scroll top.
returns Boolean - If the route was successfully updated.

Example:

class Link extends CtrlReactComponent {
  handleClick(event) {
    event.preventDefault()

    this.context.router.updateRoute(this.props.href)
  }

  render() {
    return (
      <a click={this.handleClick.bind(this)}/>
    )
  }
}

<CtrlReactRouter>
  <Link href='/target-path'/>
</CtrlReactRouter>