react-avenue

Getting started

npm i -S react-avenue
# or yarn:
yarn add react-avenue

Benefits

• Small: 4KB gzipped, almost 1/3 of react-router-dom
• Simple loading: implement lifecycle methods once, rather than for each <Route>’s component

Basic

import React from 'react'
import { Avenue } from 'react-avenue'

export default function App() {
  return (
    <Avenue render={
      ({ path }) => (
        <p>Current path: {path}</p>
      )
    } />
}

Route params

import React from 'react'
import { Avenue } from 'react-avenue'
import processorForRoutes from 'react-avenue/es/processorForRoutes'
import LandingPage from './components/LandingPage'
import Product from './components/Product'
import ProductsList from './components/ProductsList'
import ContactPage from './components/ContactPage'

const processPath = processorForRoutes([
  '/',
  '/products',
  '/products/:id',
  '/products/:id/reviews',
  '/contact',
])

export default function App() {
  return (
    <Avenue processPath={processPath} render={
      ({ route, path }) => <main>
        {
          route.home ? (
            <LandingPage />
          ) : route.products ? (
            route.products.id ? (
              <Product
                id={ route.products.id }
                activeSection={ route.products.reviews ? 'reviews' : 'overview' }
              />
            ) : (
              <ProductsList />
            )
          ) : route.contact ? (
            <ContactPage />
          ) : (
            <p>Page not found: {path}</p>
          )
        }
      </main>
    } />
  )
}

<Link>

import React from 'react'
import { Link } from 'react-avenue'

export default function PrimaryNav() {
  return (
    <nav>
      <Link href='/products'>Products</Link>
      <Link href='/contact'>Contact</Link>
    </nav>
  )
}