nextjs项目做的网站，网站某路径页面如何配置 react 写的项目？

Question

假如我用nextjs写了一个项目，pages下面有 about 和 roadmap 两个页面，分别对应网站的路径是 https://www.demo.com/about 和 https://www.demo.com/roadmap ,我想把https://www.demo.com/knowledge 网页路径放一个页面（nextjs项目中无此目录），但是这个页面是用 react 写成的单页面应用，不属于 nextjs，该如何做才能正常访问呢？
如果直接访问，似乎是会404的。是需要配置 Nginx 吗？（不太懂这个），谢谢大家

Answer 1

两个方案：

1. build 的时候，把 SPA 的内容放进 /knowledge 目录里
2. 使用 nginx，配置 /knowledge 指向 SPA 在服务器上所在的目录

Answer 2

在 Nginx 的配置文件中添加一个对应的 location 条目，用于反向代理到您的 React 应用。举个例子，假如您的 React 应用运行在另一个服务器上，监听的端口为 3000，那么可以在 Nginx 中添加如下的条目：

location /knowledge {
  proxy_pass http://your-react-app-server:3000;
  proxy_set_header Host $http_host;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  proxy_set_header X-Forwarded-Proto $scheme;
}

以上的配置告诉 Nginx，当用户访问 https://www.demo.com/knowledge 时，转发到运行在另一个服务器上的 React 应用，由它接管请求并响应。

或者
在 Next.js 项目中的 pages 目录下新建一个文件夹（例如 knowledge），然后在该文件夹下新建一个 index.js 文件，写入用于渲染 React 单页面应用的代码。然后您可以在 Next.js 项目中通过以下 API 来实现自定义路由:

// pages/knowledge/index.js
import { useEffect } from "react";
import { useRouter } from "next/router";
export default function Knowledge() {
  const router = useRouter();
  useEffect(() => {
    // 执行 React 单页面应用的初始化代码
  }, []);
  return <div id="root" />;
}
// pages/knowledge/roadmap.js
import { useRouter } from "next/router";
export default function Roadmap() {
  const router = useRouter();
  useEffect(() => {
    // 更新 React 单页面应用的路由
    router.replace("/knowledge/roadmap");
  }, []);
  return null;
}

答案引用AI生成内容，并进行了验证