Decoupling route declarations

The difficulty with routing happens when your application has dozens of routes declared within a single module since it's more difficult to mentally map routes to features.

To help with this, each top-level feature of the application can define its own routes. This way, it's clear which routes belong to which feature. So, let's start with the App component:

import React, { Fragment } from "react";
import { BrowserRouter as Router, Route, Redirect } from "react-router-dom";

import One from "./one";
import Two from "./two";

export default () => (
  <Router>
    <Fragment>
      <Route exact path="/" render={() => <Redirect to="one" />} />
      <One />
      <Two />
    </Fragment>
  </Router>
);

In this example, the application has two features: one and two. These are imported as components and rendered inside <Router>. You have to include...