Need help with react-resource-router?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

133 Stars 9 Forks Apache License 2.0 78 Commits 13 Opened issues


Configuration driven routing solution for React SPAs that manages route matching, data fetching and progressive rendering

Services available


Need anything else?

Contributors list

react-resource-router logo


React Resource Router (RRR) is a configuration driven routing solution for React that manages single page application route matching, data fetching and progressive rendering.


React Resource Router was developed by Atlassian for Jira primarily to improve performance and prepare for compatibility with React's forthcoming Concurrent Mode on both client and server. You can read more about its development and impact here.


  • Fully driven by a static configuration of route objects
  • Each route object contains the following core properties
    • path
      - the path to match
    • component
      - the component to render
    • resources
      - an array of objects containing fetch functions that request the route component's data
  • Data for a route is requested asynchronously and as early as possible, with the page progressively rendering as the requests resolve. This results in quicker meaningful render times
  • Works on both client and server without having to traverse the React tree


Create your resources

Resources describe and provide the data required for your route. This data is safely stored and accessed via the

hook or
import { createResource } from 'react-resource-router';
import { fetch } from '../common/utils';

export const homeResource = createResource({ type: 'HOME', getKey: () => 'home-resource-key', getData: () => fetch(''), });

export const aboutResource = createResource({ type: 'ABOUT', getKey: () => 'about-resource-key', getData: () => fetch(''), });

Create your components

These are the React components that get rendered for your routes. As mentioned, they can be wired into the state of your resources via the

hook or
import { useResource } from 'react-resource-router';
import { aboutResource, homeResource } from '../routes/resources';
import { Loading, Error } from './common';

export const Home = () => { const { data, loading, error } = useResource(homeResource);

if (error) { return ; }

if (loading) { return ; }


; };

export const About = () => { const { data, loading, error } = useResource(aboutResource);

if (error) { return ; }

if (loading) { return ; }


; };

Create your routes

Your route configuration is the single source of truth for your application's routing concerns.

import { Home, About } from '../components';
import { homeResource, aboutResource } from './resources';

export const appRoutes = [ { name: 'home', path: '/', exact: true, component: Home, resources: [homeResource], }, { name: 'about', path: '/about', exact: true, component: About, resources: [aboutResource], }, ];

Use the Router

Now that you've set up your resources, components and configuration correctly, all you need to do is mount the Router in your react tree with a

as a child. It will do the rest!
import {
} from 'react-resource-router';
import { appRoutes } from './routing/routes';

const App = () => ( );


npm install react-resource-router


yarn add react-resource-router


Check the docs website or the docs folder.


You can checkout the repo and play around with the examples we have setup to demonstrate how the API can be used for various use cases.

  1. Clone the repo and install dependencies
  2. Run
    npm start
  3. Local dev site will launch with all the examples


Big thanks to Thinkmill for their involvement in this project.


Copyright (c) 2020 Atlassian and others. Apache 2.0 licensed, see LICENSE file.

With ❤️ from Atlassian

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.