为什么每当我复制 URL 并粘贴它时，重定向对 Next.Js 不起作用？

Question

所以我正在创建一个网络应用程序。它使用 React 和 Next.JS 作为后端，并使用 Firebase 作为数据库。数据获取和其他东西正在工作。这里的问题是我的 UserDashboard 上有一个按钮可以转到特定的个人资料查看页面。例如，localhost:3000/profiles/ 是我单击按钮时的 URL。现在这在本地测试中有效。每当我复制具有不同 UniqueProfileID 的 URL 时，它都会重定向并转到正确的个人资料页面。但是当我通过 firebase 托管它时 - 每次我将 URL 复制到相关方式“www.exampleapp.web.app/profiles/ 时，它都会重定向到 UserDashboard。我不知道这里出了什么问题？就像当你输入 URL“instagram.com/profileName”，无论您是否有帐户，它都会直接进入个人资料。我也需要它在这里工作 -

我已经在公共目录下创建了一个动态路由，并在公共目录下创建了另一个名为“profiles”的目录

下面是我的 UserDashboard.js 代码的一部分，其中按钮是如何工作的。我也尝试不为该页面提供 Firebase Auth 挂钩，但没有成功。我希望任何人都可以访问此页面来查看个人资料。

 </Link>
      <Link href={`/profiles/${currentUser.uid}`}>
        View My Profile
      </Link>

下面是我在配置文件目录下的

[uniqueId].js

的代码。

import React, { useEffect, useState } from 'react';
import { getDoc, doc } from 'firebase/firestore';
import { db } from '@/firebase'; // Adjust import path

export default function UserProfilePage({ uid }) {
  const [userData, setUserData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const userRef = doc(db, 'users', uid);
    getDoc(userRef)
      .then((docSnapshot) => {
        if (docSnapshot.exists()) {
          setUserData(docSnapshot.data().Info);
        } else {
          setError('User data not found');
        }
      })
      .catch((error) => {
        setError('Error fetching user data');
        console.error('Error fetching user data:', error);
      })
      .finally(() => {
        setLoading(false);
      });
  }, [uid]);

  if (loading) {
    return <p>Loading...</p>;
  }

  if (error) {
    return <p>Error: {error}</p>;
  }

  return (
    <div>
      {userData ? (
        <div>
          <h2>User Profile</h2>
          <p>First Name: {userData['First Name']}</p>
          <p>Last Name: {userData['Last Name']}</p>
          <p>Contact Number: {userData['Contact Number']}</p>
          {/* Display other user details */}
        </div>
      ) : (
        <p>User data not available</p>
      )}
    </div>
  );
}

export async function getServerSideProps({ params }) {
  return {
    props: {
      uid: params.uid,
    },
  };
}

Answer 1

听起来您已将 Firebase Hosting 配置为将所有传入 URL 重写回网站的根目录。这对于单页应用程序来说很常见，这就是为什么它是 Firebase CLI 在您首次配置托管时询问您的问题之一，但听起来这不是您想要的。

阅读有关 配置重写的文档，然后打开网站的

firebase.json

配置文件，找到其中的

rewrites

部分，然后删除如下所示的重写（从链接文档中）：

"hosting": {
  // ...

  // Serves index.html for requests to files or directories that do not exist
  "rewrites": [ {
    "source": "**",
    "destination": "/index.html"
  } ]
}