javascript - Next.js 动态路由 - 页面重新加载或直接调用动态路由时出现 404

Question

我使用NextJS版本 9.1.3。

我有一个带有导出路径图的动态路由。

那就是动态路由组件：

import { Spin, Icon } from 'antd';
import { Component } from 'react';
import getLocks from '../../data/helper/getLocks';
import PageTemplate from '../../components/PageTemplate';
import RenderLock from '../../components/RenderLock';

const antIcon = <Icon type="loading" style={{ fontSize: 24 }} spin />;

class lockdetails extends Component {

  static async getInitialProps({ query }) {
    const lockToReturn = getLocks().find((el) => el.id === query.lockID);
    return { lock: lockToReturn };
  }

  render() {
    const { lock } = this.props;

    return lock ? (
      <PageTemplate>
        <div
          style={{
            margin: '0 auto',
            marginBottom: 20,
            marginTop: 20,
          }}
        >
          <RenderLock lock={lock} />
        </div>
      </PageTemplate>
    ) : <Spin indicator={antIcon} />;
  }
}
export default lockdetails;

它是这样工作的（如果我使用<Link>它，但如果我

• 重新加载页面我总是收到 404 错误
• 在浏览器中调用动态 uri，例如https://mywebsite.com/details/1/我也收到 404 错误。

正如我所说，如果我点击这条路线，它会完美运行。这表明自定义路由是正确的。

我究竟做错了什么 ？

标签： javascriptreactjsnuxt.jsnext.js