React Router is too complex. Most of my projects just need a simple top level router.
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
}
}
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
}
}
The route expressions are parsed with path-to-regexp via pathname-router
import { Link } from 'simple-react-router'
<Link href="/local/path">Home</Link>
<Link href="http://external.com/link">Home</Link>