title: create-react-app: Automatically Route Based on Files In Directory
body: <p>How can I modify create-react-app so that routes are automatically created for react components in a directory?</p>
  <p>For instance, my src directory looks like this:</p>
  <pre><code>├── App.css
  ├── App.js
  ├── App.test.js
  ├── index.css
  ├── index.js
  ├── logo.svg
  ├── reportWebVitals.js
  └── setupTests.js
  </code></pre>
  <p>I would like to modify it so that I a pages directory like this:</p>
  <pre><code>├── App.css
  ├── App.js
  ├── App.test.js
  ├── index.css
  ├── index.js
  ├── logo.svg
  ├── pages
  │   ├── about.js
  │   └── contact.js
  ├── reportWebVitals.js
  └── setupTests.js
  </code></pre>
  <p>Then, without doing any extra manual adding of routes, I could visit localhost:3000/about and localhost:3000/contact and see the components rendered on those pages.  I don't care if I have to do one time setup to get this working, but I do not want to modify any files other than the page itself whenever I add a new page.</p>
  <p>I discovered <a href="https://omarelhawary.me/blog/file-based-routing-with-react-router" rel="nofollow noreferrer">this</a> page but this relies on some Vite-specific things and I would prefer to continue using create-react-app.</p>