app.js

import React from 'react';
import { Router } from '@reach/router';
import { Contributions } from 'contributions-ui';
import { Holdings } from 'holdings-ui';
import { Policy } from 'policies-ui';
import { Layout, NotFound } from './components';

const App = props => {
  return (
    <Router>
      <Layout path='/'>
        <Policy path='policies/:policyNumber/*'>
          <Contributions path='contributions/*'/>
          <Holdings path='holdings/*'/>
        </Policy>
        <NotFound default />
      </Layout>
    </Router>
  );
};

export default App;

contributions.js

import React from 'react';
import { Router } from '@reach/router';
import { Contributions } from './handlers';

const Routes = props => {
  return (
    <Router>
      <Contributions path='/'/>
    </Router>
  );
};

export default Routes;

holdings.js

import React from 'react';
import { Router } from '@reach/router';
import { Holdings } from './handlers';

const Routes = props => {
  return (
    <Router>
      <Holdings path='/'/>
    </Router>
  );
};

export default Routes;

policies.js

import React from 'react';
import { Router } from '@reach/router';
import { Policy } from './handlers';

const Routes = props => {
  return (
    <Router>
      <Policy path='/' />
    </Router>
  );
};

export default Routes;