"如何在 nextjs 中动态呈现页面"

Question

我在前端渲染一个网页，从数据库中获取网页数据。 现在我已经硬编码了特定网页的路线，但我想让它动态化，因为数据库中有多个网页，并且还使用唯一的 url 在 nextjs 上动态呈现它们。

以下是渲染网页的代码

import React, { useEffect, useState } from "react";
import axios from "axios";
import NavigationBar from "../../components/Navbar"
import Footer from "../../components/Footer";
// import { useParams } from "react-router";

export default function Webpage() {
  // let { slug }: any = useParams();
  const [webpage, setWebpage] = useState("");
  // console.log(slug, "slug")
  useEffect(() => {
    async function renderPage() {
      const response = await axios.get(
        "http://localhost:8080/dfsk-ec35-docs"
      );
      setWebpage(response.data);
    }
    renderPage();
  }, []);
  
  return (
    <div>
      {/* Navigation bar component */}
      <NavigationBar type="main"/>
      {/* rendering the web page */}
      <div dangerouslySetInnerHTML={{ __html: webpage}} />
      {/* Footer component */}
      <Footer />
    </div>
  );
}

Answer 1

您可以将提取的pid<\/code>作为道具传递到Webpage<\/code>组件中。 您也可以使用useRouter()<\/code>直接获取Webpage<\/code>组件中的id<\/code> 。 例子：

import React, { useEffect, useState } from "react";
import axios from "axios";
import NavigationBar from "../../components/Navbar"
import Footer from "../../components/Footer";
// import { useParams } from "react-router";

export default function Webpage() {
  // let { slug }: any = useParams();
 const router = useRouter()
 const  pid  = router.query.id
  const [webpage, setWebpage] = useState("");
  // console.log(slug, "slug")
  useEffect(() => {
    async function renderPage() {
      const response = await axios.get(
        `http://localhost:8080/${pid}`
      );
      setWebpage(response.data);
    }
    renderPage();
  }, []);
  
  return (
    <div>
      {/* Navigation bar component */}
      <NavigationBar type="main"/>
      {/* rendering the web page */}
      <div dangerouslySetInnerHTML={{ __html: webpage}} />
      {/* Footer component */}
      <Footer />
    </div>
  );
}