A developer structures the Color Organizer routes as follows:

const App = () => (
  <Switch>
    <Route path="/:id" component={Color} />
    <Route path="/sort/rating" component={SortedColors} />
    <Route path="/" component={ColorList} />
  </Switch>
)

When the user navigates to /#/sort/rating, they expect to see the rating-sorted color list. Instead, the Color detail component renders and crashes because no color with the id 'sort' exists. What is the root cause and how do you fix it?