我的动态路由没有显示任何信息,我只得到404.next.js react

nfzehxib  于 2023-01-13  发布在  React
关注(0)|答案(3)|浏览(130)

我在Next.js中遇到动态路由问题。设置:我的动态页面中有getStaticPaths和getStaticProps,当我点击一个应该带我到动态路径的项目时,浏览器导航到一个带有正确url“properties/propertyId”的页面;404错误页面404错误页面不存在
我不确定我的问题是不是我如何从FireBase中提取数据。我尝试在另一个页面上使用数据提取方法,它确实提取了数据,所以我不能100%确定问题出在哪里。
当我检查网络选项卡时,它显示404未找到

http://localhost:3000/Properties/5f328e9c-656f-4691-8b4b-4f414bbfdee2

路径是正确的,它与数据库中的内容匹配,但网页显示404
这是我的动态页面,我相信getStaticPaths部分是可以的,但是第二个意见会很好,但是关于getStaticProps,我认为问题就在那里。

import { get, ref } from "firebase/database";
import React, { useState } from "react";
import BookingMenu from "../../components/BookingMenu";
import { database } from "../../components/firebase";
import PropertyStyles from "../../styles/ViewProperty.module.css";

const ViewProperty = ({ property }) => {
  return (
    <>
      <div style={{ display: "flex" }}>
        <div className={PropertyStyles.album}>Property id</div>
        <BookingMenu />
      </div>
    </>
  );
};

export default ViewProperty;

export const getStaticPaths = async () => {
  const propertyRef = ref(database, "properties");
  const allProperties = [];
  const getProperties = async () => (await get(propertyRef)).val();

  getProperties().then((properties) => {
    allProperties.push[properties ? Object.values(properties) : []];
  });

  console.log(allProperties);

  const paths = allProperties.map((property) => {
    return {
      params: { Id: property.Id.toString() },
    };
  });

  return {
    paths,
    fallback: false,
  };
};

export const getStaticProps = async (context) => {
  const id = context.params.Id;
  const propertyRef = ref(database, "properties/" + id);
  const property = [];
  const getProperties = async () => (await get(propertyRef)).val();

  getProperties().then(
    (prop) => property.push[prop ? Object.values(prop) : []]
  );
  return {
    props: { property: property },
  };
};

页文件夹结构x1c 0d1x

izj3ouym

izj3ouym1#

使用id代替Id

const paths = allProperties.map((property) => {
    return {
      params: { id: property.Id.toString() },
    };
});
...
const id = context.params.id;
6ie5vjzr

6ie5vjzr2#

我将getStaticPaths中的回退更改为true。
return {路径,回退:真,};

6bc51xsx

6bc51xsx3#

请尝试访问http://localhost:3000/properties/5 f328 e9 c-656 f-4691 - 8b 4 b-4f 414 bbfdee 2-小写的“properties”。如果您使用的是Mac OS,则可能会出现此问题,因为文件系统不区分大小写,例如您将文件夹命名为pages/Properties,但对于Mac OS,它与pages/properties相同,nextJs将生成/properties

相关问题