¿Cómo puedo modificar create-react-app para que las rutas se creen automáticamente para los componentes de reacción en un directorio?

Por ejemplo, mi directorio src se ve así:

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

Me gustaría modificarlo para que tenga un directorio de páginas como este:

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

Luego, sin agregar rutas manualmente, podría visitar localhost:3000/about y localhost:3000/contact y ver los componentes representados en esas páginas. No me importa si tengo que hacer una configuración única para que esto funcione, pero no quiero modificar ningún archivo que no sea la página misma cada vez que agrego una nueva página.

Descubrí esta página, pero depende de algunas cosas específicas de Vite y preferiría continuar usando create-react-app.