apache Next.JS动态路由静态导出项目在新页签中打开或重新加载页面导致404

doinxwow  于 2022-11-16  发布在  Apache
关注(0)|答案(1)|浏览(309)

我有一个带有Apache + Cpanel的VPS。我不能在上面配置Nginx,所以唯一的方法,据我所知,是先“静态导出”,然后再部署它。结果我不能通过直接粘贴在url栏上的链接(而不是通过点击链接文本)访问产品页面。链接看起来是这样的:www.example.com/products/4www.example.com/products/213我的第一个建议是因为我'静态导出'项目。
我将next-route与<Link />一起使用
我的代码

import React, { Component } from 'react';
import { withRouter } from 'next/router';
import { connect } from 'react-redux';
import fetch from 'isomorphic-fetch';
import Navbar from '../components/Navbar';
import Footer from '../components/Footer';
import CheckoutBody from '../components/CheckoutBody';

class Product extends Component {
    static async getInitialProps({ query }) {
        let { id } = { ...query };
        if (id === undefined) id = 14;
        const res = await fetch(`http://www.example.com/api/product?id=${id}`);
        const data = await res.json();
        return { campaignDetail: data };
    }

    render() {
        let { lang } = this.props;

        return (
            <React.Fragment>
                <Navbar />
                <CheckoutBody
                    key={this.props.productDetail.id}
                    productDetail={this.props.productDetail}
                    lang={lang}
                />
                <Footer />
            </React.Fragment>
        );
    }
}

export default Product ;

相同的问题,但不同的问题:https://github.com/zeit/next.js/issues/9893
我已经试过这个到. htaccess。它是不工作的。我是非常新手regex和htaccess。

RewriteCond %{REQUEST_FILENAME}.html -f
RewriteRule !.*\.html$ %{REQUEST_FILENAME}.html [L]

1.我该怎么办?
1.这就是所谓的动态路由吗?

xytpbqjk

xytpbqjk1#

这个问题可能与使用next export而不是重写规则配置有关。我们发现,如果使用next export,nextjs路由器路径名在第一次命中时不会填充预期的路由。在nextjs中修复此问题之前,您可以使用_app. js中的提供程序 Package 组件并调整路由,或者将其放在_app. js默认函数中的return语句之前:

import { useRouter } from 'next/router'

const { asPath, push, pathname } = useRouter()
if (asPath.split('?')[0] != pathname.split('?')[0] && !pathname.includes('[')) {
    // Work around for next export breaking SPA routing on first hit
    console.log('Browser route ' + asPath + ' did not match nextjs router route ' + pathname)
    push(asPath)
    return <div>Loading...</div>
}

相关问题