部署到 Firebase 托管的 Next.js 站点刷新时路由重置为主页

Question

我使用 Next.js 和 Tailwind CSS 创建了一个静态网站，其中包含多个页面，包括主页、服务和联系方式。每条路线都会正确导航到其各自的页面。在 localhost 上一切正常，但是当我将构建部署到 Firebase Hosting 时，只有在不刷新页面时路由才有效。如果我刷新页面，该站点将默认为主页，并且我无法导航到其他页面。例如，如果我导航到“服务”页面，然后刷新该页面，它会显示主页，而 URL 仍指示“服务”页面。

这是我的代码-

import { memo, useEffect, useState } from 'react'; 
import Link from "next/link";
import Banner from "./Banner";
import Button from './Buttons';
import Image from "next/image"; 
import { AppRoutes } from '@/constants/appRoutes'; 
import BrandLogo from '@/assets/yume-logo.svg'
import BrandLogoText from '@/assets/yume-logo-text.svg'  
import { usePathname } from 'next/navigation';
 

const Header = () =>{ 

    // Get the current pathname from the router.
    const router = usePathname()  

    // State to manage the active navigation item and menu open/close status.
    const [activeNav, setActiveNav] = useState('');
    const [menuOpen, setMenuOpen] = useState(false);

    // Update the activeNav state when the pathname changes.
    useEffect(() => {
        setActiveNav(router);
    }, [router]);

    // Toggle the menu open/close status.
    const toggleMenu = () => {
        setMenuOpen(!menuOpen);
    };

    // Close the menu when a navigation item is clicked.
    const closeMenu = () => {
        setMenuOpen(false);
    };

    return(
        <>
            <Banner/> 
            <header className="sticky top-0 w-full z-40 md:py-1 py-0 bg-white drop-shadow-sm"> 
                <nav className='container md:max-w-screen-xl mx-auto flex flex-col md:justify-between md:flex-row md:px-0'>
                    <div className='flex justify-between w-full px-8 py-4'>
                        <Link
                            className='flex gap-4 items-center max-w-fit'
                            onClick={closeMenu}
                            href={AppRoutes.HOME_PAGE}>
                        <Image 
                                className='h-7 max-w-fit'
                                src={BrandLogo}
                                alt="yume labs logo" />
                            <Image
                                className='h-3 max-w-fit' 
                                src={BrandLogoText}
                                alt="yume labs logo" />
                        </Link>

                        <div className="w-8 h-8 flex flex-col align-middle justify-center gap-1 md:hidden" onClick={toggleMenu} aria-hidden>
                            <div className='w-full h-1 bg-gray-600'></div>
                            <div className='w-full h-1 bg-gray-600'></div>
                            <div className='w-full h-1 bg-gray-600'></div>
                        </div>
                    </div>

                    <div className='flex md:flex-row flex-col md:items-center gap-4 md:w-fit py-8 md:py-0'>
                        <div className='px-8 py-4 flex'>
                            <Link
                                className='w-full h-full whitespace-nowrap'
                                href={AppRoutes.SERVICES}>
                                Our Services
                            </Link> 
                        </div>
                        <div className='px-8 md:px-0'>
                            <Link 
                                href={AppRoutes.CONTACT_US}>
                                <Button
                                    label='Contact Us'
                                    btnsize='sm'
                                    type='button'
                                />
                            </Link>  
                        </div> 
                    </div> 
                </nav>
            </header>
        </>
    )
}

export default memo(Header)

Answer 1

我终于找到答案了。这是与 firebase 及其如何处理单页应用程序的客户端路由相关的问题。

基本上，只要请求与公共目录中的文件不匹配，Firebase 托管就会提供 index.html 文件，这会导致应用程序在刷新时无法正确处理路由。

我必须在 firebase Json 中添加 cleanURLs

{
  "hosting": {
    "public": "out",
    "cleanUrls": true,
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}