simple-react-router

Why

React Router is too complex. Most of my projects just need a simple top level router.

Usage

Static Routes

To create a static router simply subclass from SimpleReactRouter and define the routes() method.

import React from 'react'
import SimpleReactRouter from 'simple-react-router'

// Pages
import NotFound from './components/NotFound'
import HomePage from './components/HomePage'
import SignupPage from './components/SignupPage'
import LoginPage from './components/LoginPage'
import LogoutPage from './components/LogoutPage'
import PostIndexPage from './components/PostIndexPage'
import NewPostPage from './components/NewPostPage'
import PostShowPage from './components/PostShowPage'
import PostEditPage from './components/PostEditPage'

export default class Router extends SimpleReactRouter {
  routes(map){
    map('/',                   HomePage)
    map('/signup',             SignupPage)
    map('/login',              LoginPage)
    map('/logout',             LogoutPage)
    map('/posts',              PostIndexPage)
    map('/posts/new',          NewPostPage)
    map('/posts/:postId',      PostShowPage)
    map('/posts/:postId/edit', PostEditPage)
    map('/:path*',             NotFound) // catchall route
  }
}

Dynamic Routes

To use dynamic routes define getRoute() instead of routes() and you're routes will be calculated every time the Router component is constructed or receives props.

import React from 'react'
import SimpleReactRouter from 'simple-react-router'

// Pages
import NotFound from './components/NotFound'
import HomePage from './components/HomePage'
import SignupPage from './components/SignupPage'
import LoginPage from './components/LoginPage'
import LogoutPage from './components/LogoutPage'
import PostIndexPage from './components/PostIndexPage'
import NewPostPage from './components/NewPostPage'
import PostShowPage from './components/PostShowPage'
import PostEditPage from './components/PostEditPage'

export default class Router extends SimpleReactRouter {
  getRoutes(map, props){
    const { loggedIn } = props
    if (loggedIn){
      map('/',                   LoggedInHomePage)
      map('/logout',             LogoutPage)
      map('/posts/new',          NewPostPage)
      map('/posts/:postId/edit', PostEditPage)
    } else {
      map('/',       LoggedOutHomePage)
      map('/signup', SignupPage)
      map('/login',  LoginPage)
    }
    map('/posts',         PostIndexPage)
    map('/posts/:postId', PostShowPage)
    map('/:path*',        NotFound) // catchall route
  }
}

Path Expressions

The route expressions are parsed with path-to-regexp via pathname-router

Links

import { Link } from 'simple-react-router'

<Link href="/local/path">Home</Link>
<Link href="http://external.com/link">Home</Link>

tecsyscom/simple-react-router

ErrorLooks like something went wrong!

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages