在 Next.js 环境中使用 react-router

Question

我目前正在使用 next.js 框架。是否可以将组件路由出 /pages 目录？不想使用“react-router”（因为编辑 server.js 会很复杂）。如果这是不可避免的，我会，但还有其他方法吗？

Answer 1

恐怕这在 nextjs 中是不可能的。nextjs 构建其路线视图页面文件夹。你可以做的不会破坏你的项目结构或 URL 的事情是

将您的组件添加到新存储库中。根据上一个项目中的路线创建页面文件夹。在每个页面文件夹中添加index.js。并导入主要组件，而不是将其实际移动到页面文件夹，例如：

export { default } from './components/users';

这样您就可以拖放现有结构，并且仅将路线添加为页面文件夹。需要考虑的注意事项：

1. next 默认路由区分大小写，因此如果您想要解决此问题，请小心您的文件夹名称，您应该使用 nextjs v12 将所有页面创建为小写，并配置您的项目以将所有路由转换为小写。

2. 您可以通过添加嵌套文件夹来嵌套路由：

pages 
   userslist
     userdetail 
      index.js

此结构将创建此路由：/userlist/userdetail

3. 如果您有不希望用户可访问的组件，请不要将它们放入页面中

4. 如果您的路线中有动态路线（例如 id），您可以通过在 [id] 等页面中添加文件夹来指定它，并按照此语法重定向到它

Router.push(`/sth/sth/${sth.id}`);

5. 当您需要自定义链接时，nextjs 中的重定向配置可能会派上用场

我还应该警告您，将现有项目迁移到 nextjs 需要大量工作并对项目进行大量更改。