How can I modify create-react-app so that routes are automatically created for react components in a directory?

For instance, my src directory looks like this:

├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
├── reportWebVitals.js
└── setupTests.js

I would like to modify it so that I a pages directory like this:

├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
├── pages
│   ├── about.js
│   └── contact.js
├── reportWebVitals.js
└── setupTests.js

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.

I discovered this page but this relies on some Vite-specific things and I would prefer to continue using create-react-app.