routes.js

let routes = (
  <RankedSwitch>
    {/*
    <RankedSwitch> picks the best child <Route> that matches
    the path. Like <Switch>, it does not match deeply, so you
    need to use /* on the path if you want to do that. Like
    @reach/router's <Router>, it ranks the paths so you don't
    have to think about ordering.

    Con: You have to use /* to do deep matching
    Pro: You don't have to put all your <Route>s in the same
         owner, just need to use a `path` prop on children (huge IMO)
    */}
    <Route path="courses/*">
      <Courses>
        {/*
        Layout components render their children, which may be a
        <RankedSwitch> if you want to do another level of matching.

        Con: ???
        Pro: Build your layouts naturally, using children
        Pro: No need for <Outlet>
        */}
        <RankedSwitch>
          <Route path="react-fundamentals">
            <ReactFundamentalsCourse />
          </Route>
          <Route path=":course">
            <Course />
          </Route>
        </RankedSwitch>
      </Courses>
    </Route>
    <Route path="courses/new">
      <PublicLayout>
        <NewCourse />
      </PublicLayout>
    </Route>
    <Route path="support">
      <Support />
    </Route>
  </RankedSwitch>
)