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

Question

我有一个带有 Apache + Cpanel 的 VPS。 我无法通过它配置 Nginx，所以据我所知，唯一的方法是先“静态导出”然后部署它。 原来我无法通过直接粘贴在 url 栏上的链接访问产品页面(而不是通过单击链接文本)。 链接看起来像这样:www.example.com/products/4或 www.example.com/products/213 我的第一个建议是因为我“静态导出”了项目。

我将 next-routes 与 <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。它不工作。我是正则表达式和 htaccess 的新手。

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

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

Answer 1

该问题可能与使用下一次导出而不是重写规则配置有关。我们发现，如果您使用 next export，nextjs 路由器路径名在第一次命中时不会填充预期的路由。在 nextjs 解决此问题之前，您可以使用 _app.js 中的提供程序来包装您的组件并调整路由，或者将其放在 _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>
}