React Router Static Config

Static route configuration helpers for React Router.

This is a fork off react-router-config with support for partially applied routes (you get to keep your code splitting support) and static switch matching.

Installation

Using npm:

$ npm install --save react-router-static-config

Then with a module bundler like webpack, use as you would anything else:

import { matchRoutes, createPartialRoutes } from 'react-router-static-config'

/* OR */

import matchRoutes from 'react-router-static-config/matchRoutes'
import createPartialRoutes from 'react-router-static-config/createPartialRoutes'

The UMD build is also available on unpkg:

<script src="https://unpkg.com/react-router-static-config/umd/react-router-static-config.min.js"></script>

You can find the library on window.ReactRouterStaticConfig

Motivation

With the introduction of React Router v4, there is no longer a centralized route configuration. There are some use-cases where it is valuable to know about all the app's potential routes such as:

• Loading data on the server or in the lifecycle before rendering the next screen
• Linking to routes by name
• Static analysis

This project seeks to define a shared format for others to build patterns on top of.

Route Configuration Shape

Routes are objects with the same properties as a <Route> with a couple differences:

• the only render prop it accepts is component (no render or children)
• introduces the routes key for sub routes
• Consumers are free to add any additional props they'd like to a route, you can access props.route inside the component, this object is a reference to the object used to render and match.
• The name is what will be used as object key when using createPartialRoutes.

import { matchRoutes } from 'react-router-static-config'


const routes = [
  {
	  path: '/',
	  name: 'Home',
	  exact: true,
	  component: Home
  },
  {
	  path: '/child/:id',
	  name: 'Child',
	  component: Child,
	  routes: [
		  {
			  path: '/child/:id/grand-child',
			  name: 'Grandchild',
			  component: GrandChild
		  }
    ]
  }
]


// Matching the Child route
matchRoutes(routes, '/child/jeff')

Static-Config also supports Redirects if you provide a Redirect Object:

const routes = [
	{
		path: '/'
		name: 'Home',
		component: Home,
	},
	{
		path: '/oldhome'
		redirect: {
			to: '/'
			push: true,
		}
	}
]

Note: Just like <Route>, relative paths are not (yet) supported. When it is supported there, it will be supported here.

API

matchRoutes(routes<object>, pathname<string>, useSwitch<bool> = true)

Returns matched route.
Returns an array of matched routes if useSwitch = false.

Parameters

• routes - the route configuration
• pathname - the pathname component of the url. This must be a decoded string representing the path.
• useSwitch - If should use <Switch> behavior. Recurses with child routes first if they are available to find match. This means nested child routes with be matched first when using switch.

import { matchRoutes } from 'react-router-static-config'
const branch = matchRoutes(routes, '/child/23', false)
// using the routes shown earlier, this returns
// [
//   routes[0],
//   routes[0].routes[1]
// ]


// Using matchRoute's switch
import { matchRoutes } from 'react-router-static-config'

const match = matchRoutes(routes, '/child/23/grand-child')

// With switch, this returns
// {
//      path: '/child/:id/grand-child',
//			name: 'Grandchild',
//			component: GrandChild
//  }

createPartialRoutes(routes)

In order to ensure that matching outside of render with matchRoutes and inside of render result in the same branch, you must use createPartialRoutes instead of <Route> inside your components. You can render a <Route> still, but know that it will not be accounted for in matchRoutes outside of render.

import { BrowserRouter, Switch } from 'react-router'
import { createPartialRoutes } from 'react-router-static-config'

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
)


// Ideally you would put this in another file
const childRoutes = [
  {
    path: '/child/:id/grand-child',
    name: 'Grandchild',
  }
]

const routes = [
  {
	  path: '/',
	  name: 'Home',
	  exact: true,
	  component: Home
  },
  {
	  path: '/child/:id',
	  name: 'Child',
	  routes: childRoutes,
  }
]


const partialRoutes = createPartialRoutes(routes)

const GrandChild = ({ someProp }) => (
  <div>
    <h3>Grand Child</h3>
    <div>{someProp}</div>
  </div>
)

const Child = () => {
    const childRoutes = createPartialRoutes(childRoutes);
    return (
        <div>
          <h2>Child</h2>
          
          <childRoutes.GrandChild component={GrandChild} />
        </div>
    )
}

const Root = () => (
  <div>
    <h1>Root</h1>
    
    <Switch>
	    {/* Since we already declared our component in config we don't need to apply any more props */}
	    <partialRoutes.Home />
	    
	    <partialRoutes.Child component={Child} />
    </Switch>
  </div>
)


ReactDOM.render((
  <BrowserRouter>
    {/* kick it all off with the root route */}
    <Root />
  </BrowserRouter>
), document.getElementById('root'))