React Router

A simple router for React apps.

Installation

Using npm:

$ npm i @joshdoesthis/react-router

Using yarn:

$ yarn add @joshdoesthis/react-router

Usage

Basic Routes

import { Router, Route, Link, useRouter } from '@joshdoesthis/react-router'

const Home = () => {
  const router = useRouter()

  return (
    <div>
      <h1>Home</h1>
      <Link path='/page/1'>Page 1</Link>
      <Link path='/page/2'>Page 2</Link>
      <button onClick={() => router.navigate('/page/3')}>Page 3</button>
    </div>
  )
}

const Page = () => {
  const router = useRouter()
  const { params } = router.state

  return <h1>Page: {params.pageId}</h1>
}

const NotFound = () => {
  const router = useRouter()

  return (
    <div>
      <h1>Not Found</h1>
      <button onClick={() => router.back()}>Go Back</button>
    </div>
  )
}

const App = () => {
  return (
    <Router>
      <Route path='/' component={Home} />
      <Route path='/page/:pageId' component={Page} />
      <Route path='/404' component={NotFound} />
    </Router>
  )
}

Authenticated Routes

import { Router, Route, Link, useRouter } from '@joshdoesthis/react-router'
import { Auth, useAuth } from '../provider/auth'

const Home = () => {
  const router = useRouter()

  return (
    <div>
      <h1>Home</h1>
      <Link path='/page/1'>Page 1</Link>
      <Link path='/page/2'>Page 2</Link>
      <button onClick={() => router.navigate('/page/3')}>Page 3</button>
    </div>
  )
}

const Page = () => {
  const router = useRouter()
  const { params } = router.state

  return <h1>Page: {params.pageId}</h1>
}

const Login = () => {
  return <h1>Login</h1>
}

const NotFound = () => {
  const router = useRouter()

  return (
    <div>
      <h1>Not Found</h1>
      <button onClick={() => router.back()}>Go Back</button>
    </div>
  )
}

const App = () => {
  const auth = useAuth()

  return (
    <Router authenticated={auth.state.authenticated}>
      <Route path='/' component={Home} />
      <Route auth path='/page/:pageId' component={Page} />
      <Route path='/login' component={Login} />
      <Route path='/404' component={NotFound} />
    </Router>
  )
}

const AuthenticatedApp = () => {
  return (
    <Auth>
      <App />
    </Auth>
  )
}

Router

| Prop | Type | Description | | ------------------ | --------- | ------------------------------------------------------------------------------- | | authenticated | boolean | Whether or not the user is authenticated. Defaults to false. | | authRedirect | string | The path to redirect to if the user is not authenticated. Defaults to /login. | | notFoundRedirect | string | The path to redirect to if the route is not found. Defaults to /404. |

Route

| Prop | Type | Description | | ----------- | ---------- | ---------------------------------------------------------------------- | | auth | boolean | Whether or not the route requires authentication. Defaults to false. | | notFound | boolean | Whether or not the route is the not found route. Defaults to false. | | path | string | The path to match. | | component | function | The component to render. |

Link

| Prop | Type | Description | | -------- | --------- | --------------------------------------------------------- | | path | string | The path to link to. | | ext | boolean | Whether or not the link is external. Defaults to false. | | target | string | The target of the link. Defaults to _self. | | style | object | The style of the link. |

useRouter

| Prop | Type | Description | | ---------- | ------------------------ | ------------------------------------ | | state | object | The current state of the router. | | navigate | (path: string) => void | Navigates to the specified path. | | back | () => void | Navigates back to the previous path. |