create-react-app：根据目录中的文件自动路由

Question

如何修改 create-react-app 以便自动为目录中的 React 组件创建路由？

例如，我的 src 目录如下所示：

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

我想修改它，以便我有一个像这样的页面目录：

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

然后，无需进行任何额外的手动添加路由，我就可以访问 localhost:3000/about 和 localhost:3000/contact 并查看这些页面上呈现的组件。我不在乎是否必须进行一次设置才能使其正常工作，但每当我添加新页面时，我不想修改页面本身以外的任何文件。

我发现了this页面，但这依赖于一些特定于Vite的东西，我更愿意继续使用create-react-app。

Answer 1

在使用 React js 创建任何新的 SPA 时，我们需要每次都手动设置路由。

但是您可以使用以下包，它根据文件夹结构动态设置路由。 反应自动页面路由器