aux-router

React router that supports rendering of multiple independent (auxiliary) routes.

Install

npm install --save aux-router

Documentation

AuxRouter

It is a core component. All other aux-router components should be inside AuxRouter element.

import React from 'react'
import { AuxRouter } from 'aux-router'

const App = () => {
  return <AuxRouter>...</AuxRouter>
}

export default App

AuxHashRouter

It is a core component. All other aux-router components should be inside AuxRouter element.

import React from 'react'
import { AuxHashRouter } from 'aux-router'

const App = () => {
  return <AuxHashRouter>...</AuxHashRouter>
}

export default App

Aux path vs. main path

Since the rest of components use terms aux path and main path it is important to understand the difference between them. Let's assume that we have this URL: example.com/a(b/c), the main path is /a and the aux path is (b/c).

AuxRoute

It is a route matcher. The AuxRoute that matches the current aux path will rendered.

import React from 'react'
import { AuxRouter, AuxRoute } from 'aux-router'

function ComponentA() {
  return (...)
}

function ComponentB() {
  return (...)
}

const App = () => {
  return (
    <AuxRouter>
        {/*
            ComponentA is rendered
            only when URL contains
            (componentA/...)
        */}
        <AuxRoute
            componentName='componentA'
            component={ComponentA}
        />

        {/*
            ComponentB is rendered
            only when URL contains
            (componentB/one)
        */}
        <AuxRoute
            componentName='componentB'
            componentValue='one'
            component={ComponentB}
        />
    </AuxRouter>)
}

export default App

• componentName - name of the component, the component will be rendered when the current aux path contains (name/...). You don't have to specify it if the AuxRoute is within a component that already uses AuxRoute
• componentValue - value the component, the component will be rendered when the current aux path contains (.../value)
• component - component to render

AuxLink

It is a component that is responsible for creating links for aux path in your application.

import React from 'react'
import { AuxLink } from 'aux-router'

const MyNavigation = () => {
  return (
    <nav>
      <ul>
        <li>
          {/*
                It creates a link to (componentA/one)
            */}
          <AuxLink
            componentName='componentA'
            componentValue='one'
            description='Component A - one'
          />
        </li>
      </ul>
    </nav>
  )
}

export default App

• componentName - it is translated to a link that contains (name/...). You don't have to specify it if the link is within a component that uses AuxRoute
• componentValue - it is translated to a link that contains (.../value)
• description - description of the link
• activeClassName - css class that will be applied when the current aux path matches the (name/value)

AuxMainRoute

It is a route matcher. The AuxMainRoute that matches the current main path will rendered.

import React from 'react'
import { AuxRouter, AuxMainRoute } from 'aux-router'

function ComponentA() {
  return (...)
}

function ComponentB() {
  return (...)
}

const App = () => {
  return (
    <AuxRouter>
        {/*
            ComponentA is rendered
            only when URL contains
            /a as a main path
        */}
        <AuxMainRoute
            path='/a'
            component={ComponentA}
        />

        {/*
            ComponentB is rendered
            only when URL contains
            /b as a main path
        */}
        <AuxMainRoute path='/b'>
          <ComponentB />
        </AuxMainRoute>
        />
    </AuxRouter>)
}

export default App

• component - the component, that will be rendered when the current main path matches to the path property
• path - the main path

AuxMainLink

It is a component that is responsible for creating links for main path in your application.

import React from 'react'
import { AuxMainLink } from 'aux-router'

const MyNavigation = () => {
  return (
    <nav>
      <ul>
        <li>
          {/*
                It creates a link to /a
            */}
          <AuxMainLink
            activeClassName='selected'
            path='/a'
            description='Go to component a'
          />
        </li>
      </ul>
    </nav>
  )
}

export default App

• activeClassName - css class that will be applied when the current main path matches the path property
• activeStyle - css style that will be applied when the current main path matches the path property
• description - description of the link
• path - it is translated to a link that contains _/value in the main path

Example

CodesAndBox

More advanced example

CodesAndBox

Contributing

Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

MIT © KamilBugnoKrk